<template>
  <div class="page">
    <div class="header">
      <van-nav-bar title="Post AD" left-arrow @click-left="onClickLeft" />
    </div>
    <div class="content">
      <div class="step-box" v-if="!vipPublish">
        <div class="step-title">Just 5 mins to publish an ad.</div>
        <div class="step-imgBox">
          <img
            class="step-imgBox-img"
            src="../../assets/images/postAd/success.png"
            alt=""
          />
          <div class="green-line"></div>
          <img
            class="step-imgBox-img"
            src="../../assets/images/postAd/success.png"
            alt=""
          />
          <div class="green-line"></div>
          <img
            v-if="stepOneAndTwo"
            class="step-imgBox-img"
            src="../../assets/images/postAd/three.png"
            alt=""
          />
          <img
            v-if="stepThree"
            class="step-imgBox-img"
            src="../../assets/images/postAd/success.png"
            alt=""
          />
          <img
            v-if="stepFour"
            class="step-imgBox-img"
            src="../../assets/images/postAd/success.png"
            alt=""
          />
          <div class="black-line" v-if="!stepFour"></div>
          <div class="green-line" v-if="stepFour"></div>

          <img
            v-if="!stepFour"
            class="step-imgBox-img"
            src="../../assets/images/postAd/four.png"
            alt=""
          />
          <img
            v-if="stepFour"
            class="step-imgBox-img"
            src="../../assets/images/postAd/success.png"
            alt=""
          />
        </div>
        <div class="step-textBox">
          <span class="step-text1">Category</span>
          <span class="step-text2">location</span>
          <span class="step-text3">Detail</span>
          <span class="step-text4">Publish</span>
        </div>
      </div>
      <!-- 步骤一二的分类和地区选择 -->
      <div class="category-box" v-if="stepOneAndTwo">
        <div class="category-header">
          <img
            class="category-box-img"
            src="../../assets/images/postAd/one.png"
            alt=""
          />
          <div class="category-header-title">Category</div>
        </div>
        <div class="choose-info">Choose a Category for Your Ad</div>
        <div
          class="category-item"
          v-for="item in classificationList"
          :key="item.dictValue"
          :class="{ activeCategoryBg: category == item.dictValue }"
          @click="checkClassification(item)"
        >
          {{ item.dictLabel }}
        </div>
      </div>
      <div class="location-box" v-if="stepOneAndTwo">
        <div class="location-header">
          <img
            class="location-box-img"
            src="../../assets/images/postAd/two.png"
            alt=""
          />
          <div class="location-header-title">Select the city</div>
        </div>
        <div class="location-info">
          Your ad will be displayed in the chosen Category
        </div>
        <!-- 地区选择 -->
        <!-- <h1>地区选择框TODO</h1> -->
        <!-- 选择框 -->
        <div class="showRight-box">
          <div class="area-flex-box" @click="show_are = !show_are">
            <div class="area-box-lf">{{ deptTree_select }}</div>
            <div class="area-box-rg">
              <img
                class="bottom-icon-bl-img"
                src="../../assets/images/home/bottom-icon-bl.png"
                alt=""
              />
            </div>
          </div>
          <!-- 选择框弹出 -->
          <van-popup
            v-model="show_are"
            round
            position="bottom"
            :style="{
              height: '90%',
              margin: '10px',
              width: '-webkit-fill-available',
            }"
          >
            <van-radio-group v-model="deptTree_select_id">
              <van-cell-group v-for="item in deptTree" :key="item.id">
                <van-cell>
                  <template>
                    <strong>{{ item.label }}</strong>
                  </template>
                </van-cell>
                <van-cell
                  :title="itemy.label"
                  clickable
                  @click="Check_deptTree_select(itemy)"
                  v-for="itemy in item.children"
                  :key="itemy.id"
                >
                  <template #right-icon>
                    <van-radio
                      :name="itemy.id"
                      icon-size="20px"
                      shape="square"
                      checked-color="#273458"
                    />
                  </template>
                </van-cell>
              </van-cell-group>
            </van-radio-group>
          </van-popup>
          <!-- 选择框弹出2 -->
          <div class="location-select-box" v-if="show_are_maney">
            <div class="location-list">
              <div class="location-state">
                <div class="location-list-box">
                  <van-checkbox-group
                    v-model="dept_list_select"
                    @change="Change_dept_list_select"
                  >
                    <van-cell-group>
                      <van-cell
                        v-for="item in dept_list"
                        clickable
                        :key="item.deptId + item.deptName"
                        :title="item.deptName"
                      >
                        <template #right-icon>
                          <span>$:{{ item.maney }}USD</span>
                          <van-checkbox
                            checked-color="#273458"
                            icon-size="20px"
                            :name="item"
                          />
                        </template>
                      </van-cell>
                    </van-cell-group>
                  </van-checkbox-group>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="totol">
          <div class="location-select-box">
            <div class="location-list">
              <div class="location-state">
                <div class="location-list-box">
                  <van-cell-group>
                    <van-cell :title="'Summary'">
                      <template #right-icon> </template>
                    </van-cell>
                    <van-cell
                      v-for="item in dept_list_select"
                      :key="item.deptId + dept_list_select"
                      :title="item.deptName"
                    >
                      <template #right-icon>
                        <span>$:{{ item.maney }}USD</span>
                      </template>
                    </van-cell>
                    <van-cell :title="' '">
                      <template #right-icon>
                        <span
                          >Total $:<strong
                            >{{ dept_list_select_totol }} USD</strong
                          ></span
                        >
                      </template>
                    </van-cell>
                  </van-cell-group>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="confirm-btn" @click="goStepThree">Continue</div>
      </div>
      <!-- 步骤三的详情填写 又分普通、vip、商铺 -->
      <div class="detail-box" v-if="stepThree">
        <div class="normal-box" v-if="normalPublish">
          <div class="normal-city-iptBox">
            <div class="city-info">
              Location information is very important. The distance to viewer
              will be shown.Every ad has the same chance to display on the very
              top. Therefore protect every user's benefit.
            </div>
            <div class="city-header">
              <div class="city-header-lf">
                <img
                  class="city-three-img"
                  src="../../assets/images/postAd/three.png"
                  alt=""
                />
              </div>
              <div class="city-header-rg">
                <p class="header-rg-p1">Detail</p>
                <p class="header-rg-p2">* choose city</p>
              </div>
            </div>
            <div
              class=""
              v-for="(item, index) in dept_list_select"
              :key="index + item.deptName"
            >
              <div class="city-title">城市名称</div>
              <van-field
                class="city-ipt"
                v-model="item.deptName"
                placeholder="European"
              />
              <div class="city-detail-info">
                Please fll location or the street Location information is very
                important. The distance to viewer will be showed.
              </div>
              <div class="ipt-flexBox">
                <div class="flexBox-lf">
                  <van-field
                    class="city-ipt"
                    v-model="item.city_street"
                    placeholder="street"
                  />
                </div>
                <div class="flexBox-rg">
                  <van-field
                    class="city-ipt"
                    v-model="item.city_number"
                    placeholder="number"
                  />
                </div>
              </div>
              <div class="num-info">* Your phone number</div>
              <div>
                <van-field
                  class="city-ipt"
                  v-model="item.phone_number"
                  type="number"
                  placeholder="fill in"
                />
              </div>
            </div>
          </div>
          <div class="normal-person-iptBox">
            <div class="ipt-flexBox">
              <div class="flexBox-lf">
                <div class="ipt-title">Age</div>
                <van-field
                  class="city-ipt"
                  type="number"
                  v-model="age"
                  placeholder="number"
                />
              </div>
              <div class="flexBox-rg">
                <div class="ipt-title">Height</div>
                <van-field
                  class="city-ipt"
                  type="number"
                  v-model="height"
                  placeholder="number"
                />
              </div>
            </div>
            <div class="ipt-flexBox">
              <div class="flexBox-lf">
                <div class="ipt-title">Language</div>
                <div class="lang-box">
                  <div
                    class="area-flex-box"
                    @click="showLanguageBox = !showLanguageBox"
                  >
                    <div class="area-box-lf">
                      {{ languageName }}
                    </div>
                    <div class="area-box-rg">
                      <img
                        class="bottom-icon-bl-img"
                        src="../../assets/images/home/bottom-icon-bl.png"
                        alt=""
                      />
                    </div>
                  </div>
                  <!-- 语言下拉选择框 -->
                  <div class="location-select-box" v-if="showLanguageBox">
                    <div class="location-list">
                      <div class="location-state">
                        <div class="location-list-box">
                          <van-radio-group v-model="language">
                            <van-cell-group>
                              <van-cell
                                class="state-cell"
                                v-for="item in languageList"
                                clickable
                                :key="item.dictValue"
                                :title="item.dictLabel"
                                @click="chooseLanguage(item)"
                              >
                                <template #right-icon>
                                  <van-radio
                                    icon-size="20px"
                                    shape="square"
                                    checked-color="#273458"
                                    :name="item.dictValue"
                                  />
                                </template>
                              </van-cell>
                            </van-cell-group>
                          </van-radio-group>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="flexBox-rg">
                <div class="ipt-title">Race</div>
                <div class="lang-box">
                  <div
                    class="area-flex-box"
                    @click="showRaceBox = !showRaceBox"
                  >
                    <div class="area-box-lf">
                      {{ raceName }}
                    </div>
                    <div class="area-box-rg">
                      <img
                        class="bottom-icon-bl-img"
                        src="../../assets/images/home/bottom-icon-bl.png"
                        alt=""
                      />
                    </div>
                  </div>
                  <!-- 种族下拉选择框 -->
                  <div class="location-select-box" v-if="showRaceBox">
                    <div class="location-list">
                      <div class="location-state">
                        <div class="location-list-box">
                          <van-radio-group v-model="race">
                            <van-cell-group>
                              <van-cell
                                class="state-cell"
                                v-for="item in raceList"
                                clickable
                                :key="item.dictValue"
                                :title="item.dictLabel"
                                @click="chooseRace(item)"
                              >
                                <template #right-icon>
                                  <van-radio
                                    icon-size="20px"
                                    shape="square"
                                    checked-color="#273458"
                                    :name="item.dictValue"
                                  />
                                </template>
                              </van-cell>
                            </van-cell-group>
                          </van-radio-group>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div>
              <div class="ipt-title">Occupation</div>
              <div class="lang-box">
                <div
                  class="area-flex-box"
                  @click="showOccupationBox = !showOccupationBox"
                >
                  <div class="area-box-lf">
                    {{ occupationName }}
                  </div>
                  <div class="area-box-rg">
                    <img
                      class="bottom-icon-bl-img"
                      src="../../assets/images/home/bottom-icon-bl.png"
                      alt=""
                    />
                  </div>
                </div>
                <!-- 职业下拉选择框 -->
                <div class="location-select-box" v-if="showOccupationBox">
                  <div class="location-list">
                    <div class="location-state">
                      <div class="location-list-box">
                        <van-radio-group v-model="occupation">
                          <van-cell-group>
                            <van-cell
                              class="state-cell"
                              v-for="item in occupationList"
                              clickable
                              :key="item.dictValue"
                              :title="item.dictLabel"
                              @click="chooseOccupation(item)"
                            >
                              <template #right-icon>
                                <van-radio
                                  icon-size="20px"
                                  shape="square"
                                  checked-color="#273458"
                                  :name="item.dictValue"
                                />
                              </template>
                            </van-cell>
                          </van-cell-group>
                        </van-radio-group>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="availability-box">
              <div class="ipt-title">availability：</div>
              <van-radio-group v-model="available" direction="horizontal">
                <van-radio
                  class="available-radio"
                  v-for="item in availableList"
                  :key="item.dictValue"
                  :name="item.dictValue"
                  icon-size="20px"
                  checked-color="#273458"
                  >{{ item.dictLabel }}</van-radio
                >
              </van-radio-group>
            </div>
          </div>
          <div class="normal-adType-box">
            <div class="rec-box" v-if="configurationList[0]">
              <div class="adType-header">
                <div class="ad-header-lf">
                  <img
                    class="ad-header-img"
                    src="../../assets/images/home/recommend-img1.png"
                    alt=""
                  />
                </div>
                <div class="ad-header-rg">
                  <div class="ad-header-rg-1">Recommended ad</div>
                  <div class="ad-header-rg-2">
                    Your ad will be on the homepage of the your area.All viewers
                    will see it first. Highly recommended.
                  </div>
                  <div v-if="false" class="ad-header-rg-3">
                    ${{ configurationList[0].configValue }} per day
                  </div>
                </div>
              </div>
              <div class="adType-line"></div>
              <div class="type-upgrade-box">
                <div class="upgrade-box">Upgrade to Recommended ad</div>
                <van-checkbox-group v-model="type">
                  <van-checkbox
                    name="3"
                    icon-size="20px"
                    checked-color="#273458"
                    @click="chooseType(type)"
                  ></van-checkbox>
                </van-checkbox-group>
              </div>
              <div class="upload-title">Advertising cover image</div>
              <div class="upload-img-box">
                <div class="upload-container">
                  <div class="upload-item-box">
                    <CUT
                      :size_w="176"
                      :size_h="236"
                      :name="'recommendImageOne'"
                      @UpUrl="UpUrl"
                    ></CUT>
                    <div class="uploader-box" v-if="recommendImageOne == ''">
                      <img
                        class="upload-icon"
                        src="../../assets/images/postAd/upload.png"
                        alt=""
                      />
                      <div class="upload-icon-text">
                        Click to upload pictures
                      </div>
                    </div>
                    <div class="uploader-img" v-else>
                      <img :src="recommendImageOne" alt="" />
                    </div>
                  </div>
                  <div class="upload-item-box">
                    <CUT
                      :size_w="153"
                      :size_h="112"
                      :name="'recommendImageTwo'"
                      @UpUrl="UpUrl"
                    ></CUT>
                    <div class="uploader-box" v-if="recommendImageTwo == ''">
                      <img
                        class="upload-icon"
                        src="../../assets/images/postAd/upload.png"
                        alt=""
                      />
                      <div class="upload-icon-text">
                        Click to upload pictures
                      </div>
                    </div>
                    <div class="uploader-img" v-else>
                      <img :src="recommendImageTwo" alt="" />
                    </div>
                  </div>
                  <div class="upload-item-box">
                    <CUT
                      :size_w="153"
                      :size_h="112"
                      :name="'recommendImageThree'"
                      @UpUrl="UpUrl"
                    ></CUT>
                    <div class="uploader-box" v-if="recommendImageThree == ''">
                      <img
                        class="upload-icon"
                        src="../../assets/images/postAd/upload.png"
                        alt=""
                      />
                      <div class="upload-icon-text">
                        Click to upload pictures
                      </div>
                    </div>
                    <div class="uploader-img" v-else>
                      <img :src="recommendImageThree" alt="" />
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="price-box"
                v-for="item in dept_list_select_ad"
                :key="item.deptName + 'ad'"
              >
                <div class="price-box-1">{{ item.deptName }}</div>
                <div class="price-box-2">
                  {{ item.recommendPrice * 10 }}/10天
                  <van-radio-group v-model="selected1">
                    <van-radio
                      name="10"
                      icon-size="20px"
                      checked-color="#273458"
                      @click="chooseRecommend('10', 0)"
                    ></van-radio>
                  </van-radio-group>
                </div>
                <div class="price-box-3">
                  {{ item.recommendPrice * 30 }}/30天
                  <van-radio-group v-model="selected1">
                    <van-radio
                      name="30"
                      icon-size="20px"
                      checked-color="#273458"
                      @click="chooseRecommend('30', 1)"
                    ></van-radio>
                  </van-radio-group>
                </div>
              </div>
            </div>
            <div class="big-line"></div>
            <div class="rec-box" v-if="configurationList[1]">
              <div class="adType-header">
                <div class="ad-header-lf">
                  <img
                    class="ad-header-img"
                    src="../../assets/images/home/recommend-img1.png"
                    alt=""
                  />
                </div>
                <div class="ad-header-rg">
                  <div class="ad-header-rg-1">Top ad</div>
                  <div class="ad-header-rg-2">
                    Your ad will be on the top of other normal ads,and 4 times
                    bigger than normal ad.It's easy to get viewer's attention.
                  </div>
                  <div v-if="false" class="ad-header-rg-3">
                    ${{ configurationList[1].configValue }} per day
                  </div>
                </div>
              </div>
              <div class="adType-line"></div>
              <div class="type-upgrade-box">
                <div class="upgrade-box">Upgrade to Top ad</div>
                <van-checkbox-group v-model="type">
                  <van-checkbox
                    name="2"
                    icon-size="20px"
                    checked-color="#273458"
                    @click="chooseType1(type)"
                  ></van-checkbox>
                </van-checkbox-group>
              </div>
              <div class="upload-title">Advertising cover image</div>
              <div class="upload-img-box">
                <div class="upload-container">
                  <div class="upload-item-box">
                    <CUT
                      :size_w="337"
                      :size_h="266"
                      :name="'largeImage'"
                      @UpUrl="UpUrl"
                    ></CUT>
                    <div class="uploader-box" v-if="largeImage == ''">
                      <img
                        class="upload-icon"
                        src="../../assets/images/postAd/upload.png"
                        alt=""
                      />
                      <div class="upload-icon-text">
                        Click to upload pictures
                      </div>
                    </div>
                    <div class="uploader-img" v-else>
                      <img :src="largeImage" alt="" />
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="price-box"
                v-for="item in dept_list_select_ad_top"
                :key="item.deptName + 'top'"
              >
                <div class="price-box-1">{{ item.deptName }}</div>
                <div class="price-box-2">
                  {{ item.largePrice * 10 }}/10天
                  <van-radio-group v-model="selected2">
                    <van-radio
                      name="10"
                      icon-size="20px"
                      checked-color="#273458"
                      @click="chooseRecommend1('10', 1)"
                    ></van-radio>
                  </van-radio-group>
                </div>
                <div class="price-box-3">
                  {{ item.largePrice * 30 }}/30天
                  <van-radio-group v-model="selected2">
                    <van-radio
                      name="30"
                      icon-size="20px"
                      checked-color="#273458"
                      @click="chooseRecommend1('30', 1)"
                    ></van-radio>
                  </van-radio-group>
                </div>
              </div>
            </div>
          </div>
          <div class="normal-upload-box">
            <div class="upload-title">Upload Your Photos</div>
            <div class="upload-info">
              Notice：High definition,sexy,pretty photos are better.The first
              picture will be the thumbnail picture.The first photo will be the
              cover, the second and third photo will follow it. Up to 9
              photos.Not allowed to unland nude pictures.
            </div>
            <div class="upload-img-box">
              <div class="upload-container">
                <!-- <div class="upload-item-box">
                  <van-uploader :after-read="uploadFile1">
                    <div class="uploader-box" v-if="images_one == ''">
                      <img
                        class="upload-icon"
                        src="../../assets/images/postAd/upload.png"
                        alt=""
                      />
                      <div class="upload-icon-text">
                        Click to upload pictures
                      </div>
                    </div>
                    <div class="uploader-img" v-else>
                      <img :src="images_one" alt="" />
                    </div>
                  </van-uploader>
                </div> -->
                <div class="upload-item-box">
                  <CUT
                    :size_w="164"
                    :size_h="175"
                    :name="'images_one'"
                    @UpUrl="UpUrl"
                  ></CUT>
                  <div class="uploader-box" v-if="images_one == ''">
                    <img
                      class="upload-icon"
                      src="../../assets/images/postAd/upload.png"
                      alt=""
                    />
                    <div class="upload-icon-text">Click to upload pictures</div>
                  </div>
                  <div class="uploader-img" v-else>
                    <img :src="images_one" alt="" />
                  </div>
                </div>
                <div class="upload-item-box">
                  <van-uploader :after-read="uploadFile2">
                    <div class="uploader-box" v-if="images_two == ''">
                      <img
                        class="upload-icon"
                        src="../../assets/images/postAd/upload.png"
                        alt=""
                      />
                      <div class="upload-icon-text">
                        Click to upload pictures
                      </div>
                    </div>
                    <div class="uploader-img" v-else>
                      <img :src="images_two" alt="" />
                    </div>
                  </van-uploader>
                </div>
                <div class="upload-item-box">
                  <van-uploader :after-read="uploadFile3">
                    <div class="uploader-box" v-if="images_three == ''">
                      <img
                        class="upload-icon"
                        src="../../assets/images/postAd/upload.png"
                        alt=""
                      />
                      <div class="upload-icon-text">
                        Click to upload pictures
                      </div>
                    </div>
                    <div class="uploader-img" v-else>
                      <img :src="images_three" alt="" />
                    </div>
                  </van-uploader>
                </div>
                <div class="upload-item-box">
                  <van-uploader :after-read="uploadFile4">
                    <div class="uploader-box" v-if="images_four == ''">
                      <img
                        class="upload-icon"
                        src="../../assets/images/postAd/upload.png"
                        alt=""
                      />
                      <div class="upload-icon-text">
                        Click to upload pictures
                      </div>
                    </div>
                    <div class="uploader-img" v-else>
                      <img :src="images_four" alt="" />
                    </div>
                  </van-uploader>
                </div>
                <div class="upload-item-box">
                  <van-uploader :after-read="uploadFile5">
                    <div class="uploader-box" v-if="images_five == ''">
                      <img
                        class="upload-icon"
                        src="../../assets/images/postAd/upload.png"
                        alt=""
                      />
                      <div class="upload-icon-text">
                        Click to upload pictures
                      </div>
                    </div>
                    <div class="uploader-img" v-else>
                      <img :src="images_five" alt="" />
                    </div>
                  </van-uploader>
                </div>
                <div class="upload-item-box">
                  <van-uploader :after-read="uploadFile6">
                    <div class="uploader-box" v-if="images_six == ''">
                      <img
                        class="upload-icon"
                        src="../../assets/images/postAd/upload.png"
                        alt=""
                      />
                      <div class="upload-icon-text">
                        Click to upload pictures
                      </div>
                    </div>
                    <div class="uploader-img" v-else>
                      <img :src="images_six" alt="" />
                    </div>
                  </van-uploader>
                </div>
                <div class="upload-item-box">
                  <van-uploader :after-read="uploadFile7">
                    <div class="uploader-box" v-if="images_seven == ''">
                      <img
                        class="upload-icon"
                        src="../../assets/images/postAd/upload.png"
                        alt=""
                      />
                      <div class="upload-icon-text">
                        Click to upload pictures
                      </div>
                    </div>
                    <div class="uploader-img" v-else>
                      <img :src="images_seven" alt="" />
                    </div>
                  </van-uploader>
                </div>
                <div class="upload-item-box">
                  <van-uploader :after-read="uploadFile8">
                    <div class="uploader-box" v-if="images_eight == ''">
                      <img
                        class="upload-icon"
                        src="../../assets/images/postAd/upload.png"
                        alt=""
                      />
                      <div class="upload-icon-text">
                        Click to upload pictures
                      </div>
                    </div>
                    <div class="uploader-img" v-else>
                      <img :src="images_eight" alt="" />
                    </div>
                  </van-uploader>
                </div>
                <div class="upload-item-box">
                  <van-uploader :after-read="uploadFile9">
                    <div class="uploader-box" v-if="images_nine == ''">
                      <img
                        class="upload-icon"
                        src="../../assets/images/postAd/upload.png"
                        alt=""
                      />
                      <div class="upload-icon-text">
                        Click to upload pictures
                      </div>
                    </div>
                    <div class="uploader-img" v-else>
                      <img :src="images_nine" alt="" />
                    </div>
                  </van-uploader>
                </div>
              </div>
            </div>
            <div class="upload-info">Introduce</div>
            <div class="upload-info">
              Please don't include "bj","bbbj","bbfs","greek",etc.Illegal
              content is not allowed.
            </div>
            <div class="text-area-box">
              <van-field
                v-model="introduce"
                rows="3"
                autosize
                type="textarea"
                placeholder="Enter text information,Within 300 words"
              />
            </div>
          </div>
        </div>

        <div class="shop-box" v-if="shopPublish">
          <div class="shop-city-iptBox">
            <div class="city-info">
              According to a study done by University of Michigan researchers,
              shopping to relieve stress was up to 40 time smore effective at
              giving people a sense of control andshoppers were three times less
              sad compared to those thatonly browsed for items.
            </div>
            <div class="city-header">
              <div class="city-header-lf">
                <img
                  class="city-three-img"
                  src="../../assets/images/postAd/three.png"
                  alt=""
                />
              </div>
              <div class="city-header-rg">
                <p class="header-rg-p1">
                  Shop info <span class="header-rg-p2">(* must fll)</span>
                </p>
              </div>
            </div>
            <div class="city-title">* shop name</div>
            <van-field class="city-ipt" v-model="shopname" />
            <div class="city-detail-info">
              * Please fll location or the street
            </div>
            <div class="ipt-flexBox">
              <div class="flexBox-lf">
                <van-field
                  class="city-ipt"
                  v-model="city_street"
                  placeholder="street"
                />
              </div>
              <div class="flexBox-rg">
                <van-field
                  class="city-ipt"
                  v-model="city_number"
                  placeholder="number"
                />
              </div>
            </div>
            <div class="num-info">* Your phone number</div>
            <div>
              <van-field
                class="city-ipt"
                v-model="phone_number"
                placeholder="fill in"
              />
            </div>
          </div>
          <div class="shop-person-iptBox">
            <div class="checkedOut-box">
              <div class="checkedOut-lf">Table Shower</div>
              <div class="checkedOut-rg">
                <van-radio-group v-model="table_shower" direction="horizontal">
                  <van-radio
                    name="1"
                    checked-color="#273458"
                    icon-size="20px"
                    style="margin-right: 20px"
                    >Yes</van-radio
                  >
                  <van-radio name="2" checked-color="##273458" icon-size="20px"
                    >No</van-radio
                  >
                </van-radio-group>
              </div>
            </div>
            <div class="checkedOut-box">
              <div class="checkedOut-lf">Sauna</div>
              <div class="checkedOut-rg">
                <van-radio-group v-model="sauna" direction="horizontal">
                  <van-radio
                    name="1"
                    checked-color="#273458"
                    icon-size="20px"
                    style="margin-right: 20px"
                    >Yes</van-radio
                  >
                  <van-radio name="2" checked-color="##273458" icon-size="20px"
                    >No</van-radio
                  >
                </van-radio-group>
              </div>
            </div>
            <div class="checkedOut-box">
              <div class="checkedOut-lf">Jacuzzi</div>
              <div class="checkedOut-rg">
                <van-radio-group v-model="jacuzzi" direction="horizontal">
                  <van-radio
                    name="1"
                    checked-color="#273458"
                    icon-size="20px"
                    style="margin-right: 20px"
                    >Yes</van-radio
                  >
                  <van-radio name="2" checked-color="##273458" icon-size="20px"
                    >No</van-radio
                  >
                </van-radio-group>
              </div>
            </div>
            <div class="checkedOut-box">
              <div class="checkedOut-lf">Accept credit card</div>
              <div class="checkedOut-rg">
                <van-radio-group
                  v-model="accept_credit_card"
                  direction="horizontal"
                >
                  <van-radio
                    name="1"
                    checked-color="#273458"
                    icon-size="20px"
                    style="margin-right: 20px"
                    >Yes</van-radio
                  >
                  <van-radio name="2" checked-color="##273458" icon-size="20px"
                    >No</van-radio
                  >
                </van-radio-group>
              </div>
            </div>
            <!-- Masseur todo  -->
            <div class="charging-box">
              <div class="charging-box-lf">Rate for 30 miuntes</div>
              <div class="charging-box-rg">
                <van-field class="charging-ipt" v-model="ratefor30" />
              </div>
            </div>
            <div class="charging-box">
              <div class="charging-box-lf">Rate for 45 miuntes</div>
              <div class="charging-box-rg">
                <van-field class="charging-ipt" v-model="ratefor45" />
              </div>
            </div>
            <div class="charging-box">
              <div class="charging-box-lf">Rate for60 miuntes</div>
              <div class="charging-box-rg">
                <van-field class="charging-ipt" v-model="ratefor60" />
              </div>
            </div>
            <div class="charging-box">Hours</div>
            <div class="charging-box">
              <div class="charging-box-lf">mondayAm</div>
              <div class="charging-box-rg">
                <van-field class="charging-ipt" v-model="mondayAm" />
              </div>
              <div class="charging-box-lf">mondayPm</div>
              <div class="charging-box-rg">
                <van-field class="charging-ipt" v-model="mondayPm" />
              </div>
            </div>
            <div class="charging-box">
              <div class="charging-box-lf">tuesdayAm</div>
              <div class="charging-box-rg">
                <van-field class="charging-ipt" v-model="tuesdayAm" />
              </div>
              <div class="charging-box-lf">tuesdayPm</div>
              <div class="charging-box-rg">
                <van-field class="charging-ipt" v-model="tuesdayPm" />
              </div>
            </div>
            <div class="charging-box">
              <div class="charging-box-lf">wednesdayAm</div>
              <div class="charging-box-rg">
                <van-field class="charging-ipt" v-model="wednesdayAm" />
              </div>
              <div class="charging-box-lf">wednesdayPm</div>
              <div class="charging-box-rg">
                <van-field class="charging-ipt" v-model="wednesdayPm" />
              </div>
            </div>
            <div class="charging-box">
              <div class="charging-box-lf">thursdayAm</div>
              <div class="charging-box-rg">
                <van-field class="charging-ipt" v-model="thursdayAm" />
              </div>
              <div class="charging-box-lf">thursdayPm</div>
              <div class="charging-box-rg">
                <van-field class="charging-ipt" v-model="thursdayPm" />
              </div>
            </div>
            <div class="charging-box">
              <div class="charging-box-lf">fridayAm</div>
              <div class="charging-box-rg">
                <van-field class="charging-ipt" v-model="fridayAm" />
              </div>
              <div class="charging-box-lf">fridayPm</div>
              <div class="charging-box-rg">
                <van-field class="charging-ipt" v-model="fridayPm" />
              </div>
            </div>
            <div class="charging-box">
              <div class="charging-box-lf">saturdayAm</div>
              <div class="charging-box-rg">
                <van-field class="charging-ipt" v-model="saturdayAm" />
              </div>
              <div class="charging-box-lf">saturdayPm</div>
              <div class="charging-box-rg">
                <van-field class="charging-ipt" v-model="saturdayPm" />
              </div>
            </div>
            <div class="charging-box">
              <div class="charging-box-lf">sundayAm</div>
              <div class="charging-box-rg">
                <van-field class="charging-ipt" v-model="sundayAm" />
              </div>
              <div class="charging-box-lf">sundayPm</div>
              <div class="charging-box-rg">
                <van-field class="charging-ipt" v-model="sundayPm" />
              </div>
            </div>
            <div class="charging-box">
              <div class="charging-box-lf">Payment method:</div>
              <van-radio-group v-model="payment" direction="horizontal">
                <van-radio
                  name="1"
                  checked-color="##273458"
                  style="margin-right: 40px"
                  shape="square"
                  icon-size="20px"
                  >cash</van-radio
                >
                <van-radio
                  name="2"
                  checked-color="##273458"
                  shape="square"
                  icon-size="20px"
                  >bank
                </van-radio>
              </van-radio-group>
            </div>
          </div>

          <div class="shop-adType-box">
            <div class="rec-box" v-if="configurationList[0]">
              <div class="adType-header">
                <div class="ad-header-lf">
                  <img
                    class="ad-header-img"
                    src="../../assets/images/home/recommend-img1.png"
                    alt=""
                  />
                </div>
                <div class="ad-header-rg">
                  <div class="ad-header-rg-1">Recommended ad</div>
                  <div class="ad-header-rg-2">
                    Your ad will be on the homepage of the your area.All viewers
                    will see it first. Highly recommended.
                  </div>
                  <div v-if="false" class="ad-header-rg-3">
                    ${{ configurationList[0].configValue }} per day
                  </div>
                </div>
              </div>
              <div class="adType-line"></div>
              <div class="type-upgrade-box">
                <div class="upgrade-box">Upgrade to Recommended ad</div>
                <van-checkbox-group v-model="type">
                  <van-checkbox
                    name="3"
                    icon-size="20px"
                    checked-color="#273458"
                  ></van-checkbox>
                </van-checkbox-group>
              </div>
              <div class="upload-title">Advertising cover image</div>
              <div class="upload-img-box">
                <div class="upload-container">
                  <div class="upload-item-box">
                    <CUT
                      :size_w="176"
                      :size_h="236"
                      :name="'recommendImageOne'"
                      @UpUrl="UpUrl"
                    ></CUT>
                    <div class="uploader-box" v-if="recommendImageOne == ''">
                      <img
                        class="upload-icon"
                        src="../../assets/images/postAd/upload.png"
                        alt=""
                      />
                      <div class="upload-icon-text">
                        Click to upload pictures
                      </div>
                    </div>
                    <div class="uploader-img" v-else>
                      <img :src="recommendImageOne" alt="" />
                    </div>
                  </div>
                  <div class="upload-item-box">
                    <CUT
                      :size_w="153"
                      :size_h="112"
                      :name="'recommendImageTwo'"
                      @UpUrl="UpUrl"
                    ></CUT>
                    <div class="uploader-box" v-if="recommendImageTwo == ''">
                      <img
                        class="upload-icon"
                        src="../../assets/images/postAd/upload.png"
                        alt=""
                      />
                      <div class="upload-icon-text">
                        Click to upload pictures
                      </div>
                    </div>
                    <div class="uploader-img" v-else>
                      <img :src="recommendImageTwo" alt="" />
                    </div>
                  </div>
                  <div class="upload-item-box">
                    <CUT
                      :size_w="153"
                      :size_h="112"
                      :name="'recommendImageThree'"
                      @UpUrl="UpUrl"
                    ></CUT>
                    <div class="uploader-box" v-if="recommendImageThree == ''">
                      <img
                        class="upload-icon"
                        src="../../assets/images/postAd/upload.png"
                        alt=""
                      />
                      <div class="upload-icon-text">
                        Click to upload pictures
                      </div>
                    </div>
                    <div class="uploader-img" v-else>
                      <img :src="recommendImageThree" alt="" />
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="price-box"
                v-for="item in dept_list_select_ad"
                :key="item.deptName + 'ad2'"
              >
                <div class="price-box-1">{{ item.deptName }}</div>
                <div class="price-box-2">
                  {{ item.maney * 10 }}/10天
                  <van-radio-group v-model="item.selected">
                    <van-radio
                      name="10"
                      icon-size="20px"
                      checked-color="#273458"
                    ></van-radio>
                  </van-radio-group>
                </div>
                <div class="price-box-3">
                  {{ item.maney * 30 }}/30天
                  <van-radio-group v-model="item.selected">
                    <van-radio
                      name="20"
                      icon-size="20px"
                      checked-color="#273458"
                    ></van-radio>
                  </van-radio-group>
                </div>
              </div>
            </div>
            <div class="big-line"></div>
            <div class="rec-box" v-if="configurationList[1]">
              <div class="adType-header">
                <div class="ad-header-lf">
                  <img
                    class="ad-header-img"
                    src="../../assets/images/home/recommend-img1.png"
                    alt=""
                  />
                </div>
                <div class="ad-header-rg">
                  <div class="ad-header-rg-1">Top ad</div>
                  <div class="ad-header-rg-2">
                    Your ad will be on the top of other normal ads,and 4 times
                    bigger than normal ad.It's easy to get viewer's attention.
                  </div>
                  <div v-if="false" class="ad-header-rg-3">
                    ${{ configurationList[1].configValue }} per day
                  </div>
                </div>
              </div>
              <div class="adType-line"></div>
              <div class="type-upgrade-box">
                <div class="upgrade-box">Upgrade to Top ad</div>
                <van-checkbox-group v-model="type">
                  <van-checkbox
                    name="2"
                    icon-size="20px"
                    checked-color="#273458"
                  ></van-checkbox>
                </van-checkbox-group>
              </div>
              <div class="upload-title">Advertising cover image</div>
              <div class="upload-img-box">
                <div class="upload-container">
                  <div class="upload-item-box">
                    <CUT
                      :size_w="337"
                      :size_h="266"
                      :name="'largeImage'"
                      @UpUrl="UpUrl"
                    ></CUT>
                    <div class="uploader-box" v-if="largeImage == ''">
                      <img
                        class="upload-icon"
                        src="../../assets/images/postAd/upload.png"
                        alt=""
                      />
                      <div class="upload-icon-text">
                        Click to upload pictures
                      </div>
                    </div>
                    <div class="uploader-img" v-else>
                      <img :src="largeImage" alt="" />
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="price-box"
                v-for="item in dept_list_select_ad_top"
                :key="item.deptName + 'top2'"
              >
                <div class="price-box-1">{{ item.deptName }}</div>
                <div class="price-box-2">
                  {{ item.maney * 10 }}/10天
                  <van-radio-group v-model="item.selected">
                    <van-radio
                      name="10"
                      icon-size="20px"
                      checked-color="#273458"
                    ></van-radio>
                  </van-radio-group>
                </div>
                <div class="price-box-3">
                  {{ item.maney * 30 }}/30天
                  <van-radio-group v-model="item.selected">
                    <van-radio
                      name="30"
                      icon-size="20px"
                      checked-color="#273458"
                    ></van-radio>
                  </van-radio-group>
                </div>
              </div>
            </div>
          </div>
          <div class="shop-upload-box">
            <div class="upload-title">Upload Your Photos</div>
            <div class="upload-info">
              提示: 最少上传1张，最多8张，上传店铺门面
            </div>
            <div class="upload-img-box">
              <div class="upload-container">
                <!-- <div class="upload-item-box">
                  <van-uploader :after-read="uploadFile1">
                    <div class="uploader-box" v-if="images_one == ''">
                      <img
                        class="upload-icon"
                        src="../../assets/images/postAd/upload.png"
                        alt=""
                      />
                      <div class="upload-icon-text">
                        Click to upload pictures
                      </div>
                    </div>
                    <div class="uploader-img" v-else>
                      <img :src="images_one" alt="" />
                    </div>
                  </van-uploader>
                </div> -->
                <div class="upload-item-box">
                  <CUT
                    :size_w="164"
                    :size_h="175"
                    :name="'images_one'"
                    @UpUrl="UpUrl"
                  ></CUT>
                  <div class="uploader-box" v-if="images_one == ''">
                    <img
                      class="upload-icon"
                      src="../../assets/images/postAd/upload.png"
                      alt=""
                    />
                    <div class="upload-icon-text">Click to upload pictures</div>
                  </div>
                  <div class="uploader-img" v-else>
                    <img :src="images_one" alt="" />
                  </div>
                </div>
                <div class="upload-item-box">
                  <van-uploader :after-read="uploadFile2">
                    <div class="uploader-box" v-if="images_two == ''">
                      <img
                        class="upload-icon"
                        src="../../assets/images/postAd/upload.png"
                        alt=""
                      />
                      <div class="upload-icon-text">
                        Click to upload pictures
                      </div>
                    </div>
                    <div class="uploader-img" v-else>
                      <img :src="images_two" alt="" />
                    </div>
                  </van-uploader>
                </div>
                <div class="upload-item-box">
                  <van-uploader :after-read="uploadFile3">
                    <div class="uploader-box" v-if="images_three == ''">
                      <img
                        class="upload-icon"
                        src="../../assets/images/postAd/upload.png"
                        alt=""
                      />
                      <div class="upload-icon-text">
                        Click to upload pictures
                      </div>
                    </div>
                    <div class="uploader-img" v-else>
                      <img :src="images_three" alt="" />
                    </div>
                  </van-uploader>
                </div>
                <div class="upload-item-box">
                  <van-uploader :after-read="uploadFile4">
                    <div class="uploader-box" v-if="images_four == ''">
                      <img
                        class="upload-icon"
                        src="../../assets/images/postAd/upload.png"
                        alt=""
                      />
                      <div class="upload-icon-text">
                        Click to upload pictures
                      </div>
                    </div>
                    <div class="uploader-img" v-else>
                      <img :src="images_four" alt="" />
                    </div>
                  </van-uploader>
                </div>
                <div class="upload-item-box">
                  <van-uploader :after-read="uploadFile5">
                    <div class="uploader-box" v-if="images_five == ''">
                      <img
                        class="upload-icon"
                        src="../../assets/images/postAd/upload.png"
                        alt=""
                      />
                      <div class="upload-icon-text">
                        Click to upload pictures
                      </div>
                    </div>
                    <div class="uploader-img" v-else>
                      <img :src="images_five" alt="" />
                    </div>
                  </van-uploader>
                </div>
                <div class="upload-item-box">
                  <van-uploader :after-read="uploadFile6">
                    <div class="uploader-box" v-if="images_six == ''">
                      <img
                        class="upload-icon"
                        src="../../assets/images/postAd/upload.png"
                        alt=""
                      />
                      <div class="upload-icon-text">
                        Click to upload pictures
                      </div>
                    </div>
                    <div class="uploader-img" v-else>
                      <img :src="images_six" alt="" />
                    </div>
                  </van-uploader>
                </div>
                <div class="upload-item-box">
                  <van-uploader :after-read="uploadFile7">
                    <div class="uploader-box" v-if="images_seven == ''">
                      <img
                        class="upload-icon"
                        src="../../assets/images/postAd/upload.png"
                        alt=""
                      />
                      <div class="upload-icon-text">
                        Click to upload pictures
                      </div>
                    </div>
                    <div class="uploader-img" v-else>
                      <img :src="images_seven" alt="" />
                    </div>
                  </van-uploader>
                </div>
                <div class="upload-item-box">
                  <van-uploader :after-read="uploadFile8">
                    <div class="uploader-box" v-if="images_eight == ''">
                      <img
                        class="upload-icon"
                        src="../../assets/images/postAd/upload.png"
                        alt=""
                      />
                      <div class="upload-icon-text">
                        Click to upload pictures
                      </div>
                    </div>
                    <div class="uploader-img" v-else>
                      <img :src="images_eight" alt="" />
                    </div>
                  </van-uploader>
                </div>
                <div class="upload-item-box">
                  <van-uploader :after-read="uploadFile9">
                    <div class="uploader-box" v-if="images_nine == ''">
                      <img
                        class="upload-icon"
                        src="../../assets/images/postAd/upload.png"
                        alt=""
                      />
                      <div class="upload-icon-text">
                        Click to upload pictures
                      </div>
                    </div>
                    <div class="uploader-img" v-else>
                      <img :src="images_nine" alt="" />
                    </div>
                  </van-uploader>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- vip -->
        <div class="normal-box vip-box" v-if="vipPublish">
          <!-- 图片1 -->
          <div class="upload-item-box-vip-one">
            <van-uploader :after-read="uploadFile1">
              <div class="uploader-box" v-if="images_one == ''">
                <img
                  class="upload-icon"
                  src="../../assets/images/postAd/upload.png"
                  alt=""
                />
                <div class="upload-icon-text">Click to upload pictures</div>
              </div>
              <div class="uploader-img" v-else>
                <img :src="images_one" alt="" />
              </div>
            </van-uploader>
          </div>
          <div class="paragraph">
            <div class="paragraph-title">Aspen BanksIndependent Lscort</div>
            <!-- 标题1和内容1 -->
            <div class="paragraph-title-text">
              <van-field
                class="city-ipt"
                v-model="advertisementTitleOne"
                placeholder="Paragraph heading"
              />
            </div>
            <div class="paragraph-context">
              <tinymce-editor
                v-model="advertisementRemarkOne"
                :init="init_advertisementRemarkOne"
              ></tinymce-editor>
            </div>
            <!-- 标题2 -->
            <div class="paragraph-title">Aspen BanksIndependent Lscort</div>
            <div class="paragraph-title-text-w">
              <van-field
                class="city-ipt"
                v-model="advertisementTitleTwo"
                placeholder="Paragraph heading"
              />
            </div>
          </div>
          <!-- 图片2 -->
          <div class="upload-item-box-vip-one">
            <van-uploader :after-read="uploadFile2">
              <div class="uploader-box" v-if="images_two == ''">
                <img
                  class="upload-icon"
                  src="../../assets/images/postAd/upload.png"
                  alt=""
                />
                <div class="upload-icon-text">Click to upload pictures</div>
              </div>
              <div class="uploader-img" v-else>
                <img :src="images_two" alt="" />
              </div>
            </van-uploader>
          </div>
          <!-- 图片3 -->
          <div class="upload-item-box-vip-one upload-item-box-vip-one-702">
            <van-uploader :after-read="uploadFile3">
              <div class="uploader-box" v-if="images_three == ''">
                <img
                  class="upload-icon"
                  src="../../assets/images/postAd/upload.png"
                  alt=""
                />
                <div class="upload-icon-text">Click to upload pictures</div>
              </div>
              <div class="uploader-img" v-else>
                <img :src="images_three" alt="" />
              </div>
            </van-uploader>
          </div>
          <!-- 图片4 和 5  -->
          <div class="upload-item-box-vip-two">
            <div class="upload-item-box-vip-two-item">
              <van-uploader :after-read="uploadFile4">
                <div class="uploader-box" v-if="images_four == ''">
                  <img
                    class="upload-icon"
                    src="../../assets/images/postAd/upload.png"
                    alt=""
                  />
                  <div class="upload-icon-text">Click to upload pictures</div>
                </div>
                <div class="uploader-img" v-else>
                  <img :src="images_four" alt="" />
                </div>
              </van-uploader>
            </div>
            <div class="upload-item-box-vip-two-item">
              <van-uploader :after-read="uploadFile5">
                <div class="uploader-box" v-if="images_five == ''">
                  <img
                    class="upload-icon"
                    src="../../assets/images/postAd/upload.png"
                    alt=""
                  />
                  <div class="upload-icon-text">Click to upload pictures</div>
                </div>
                <div class="uploader-img" v-else>
                  <img :src="images_five" alt="" />
                </div>
              </van-uploader>
            </div>
          </div>
          <!-- 图片6 -->
          <div class="upload-item-box-vip-one upload-item-box-vip-one-501">
            <van-uploader :after-read="uploadFile6">
              <div class="uploader-box" v-if="images_six == ''">
                <img
                  class="upload-icon"
                  src="../../assets/images/postAd/upload.png"
                  alt=""
                />
                <div class="upload-icon-text">Click to upload pictures</div>
              </div>
              <div class="uploader-img" v-else>
                <img :src="images_six" alt="" />
              </div>
            </van-uploader>
          </div>
          <!-- 图片7 -->
          <div class="upload-item-box-vip-one">
            <van-uploader :after-read="uploadFile7">
              <div class="uploader-box" v-if="images_seven == ''">
                <img
                  class="upload-icon"
                  src="../../assets/images/postAd/upload.png"
                  alt=""
                />
                <div class="upload-icon-text">Click to upload pictures</div>
              </div>
              <div class="uploader-img" v-else>
                <img :src="images_seven" alt="" />
              </div>
            </van-uploader>
          </div>
          <div class="paragraph">
            <div class="paragraph-title">Aspen BanksIndependent Lscort</div>
            <!-- 标题3和内容3 -->
            <div class="paragraph-title-text">
              <van-field
                class="city-ipt"
                v-model="advertisementTitleThree"
                placeholder="Paragraph heading"
              />
            </div>
            <div class="paragraph-context">
              <tinymce-editor
                v-model="advertisementRemarkTwo"
                :init="init_advertisementRemarkTwo"
              ></tinymce-editor>
            </div>
          </div>
          <!-- 图片8\9 -->
          <div class="upload-item-box-vip-one">
            <van-uploader :after-read="uploadFile8">
              <div class="uploader-box" v-if="images_eight == ''">
                <img
                  class="upload-icon"
                  src="../../assets/images/postAd/upload.png"
                  alt=""
                />
                <div class="upload-icon-text">Click to upload pictures</div>
              </div>
              <div class="uploader-img" v-else>
                <img :src="images_eight" alt="" />
              </div>
            </van-uploader>
          </div>
          <div class="upload-item-box-vip-one">
            <van-uploader :after-read="uploadFile9">
              <div class="uploader-box" v-if="images_nine == ''">
                <img
                  class="upload-icon"
                  src="../../assets/images/postAd/upload.png"
                  alt=""
                />
                <div class="upload-icon-text">Click to upload pictures</div>
              </div>
              <div class="uploader-img" v-else>
                <img :src="images_nine" alt="" />
              </div>
            </van-uploader>
          </div>
          <div class="paragraph">
            <!-- 内容2 -->
            <div class="paragraph-context">
              <tinymce-editor
                v-model="advertisementRemarkThree"
                :init="init_advertisementRemarkThree"
              ></tinymce-editor>
            </div>
          </div>
          <div class="vip-input-box">
            <div class="vip-input-box-title">Race</div>
            <div class="vip-input-box-input">
              <div class="lang-box">
                <div class="area-flex-box">
                  <div class="area-box-lf">
                    {{ raceName }}
                  </div>
                  <div class="area-box-rg" @click="showRaceBox = !showRaceBox">
                    <img
                      class="bottom-icon-bl-img"
                      src="../../assets/images/home/bottom-icon-bl.png"
                      alt=""
                    />
                  </div>
                </div>
                <!-- 种族下拉选择框 -->
                <div class="location-select-box" v-if="showRaceBox">
                  <div class="location-list">
                    <div class="location-state">
                      <div class="location-list-box">
                        <van-radio-group v-model="race">
                          <van-cell-group>
                            <van-cell
                              class="state-cell"
                              v-for="item in raceList"
                              clickable
                              :key="item.dictValue"
                              :title="item.dictLabel"
                              @click="vipChooseRace(item)"
                            >
                              <template #right-icon>
                                <van-radio
                                  icon-size="20px"
                                  shape="square"
                                  checked-color="#273458"
                                  :name="item.dictValue"
                                />
                              </template>
                            </van-cell>
                          </van-cell-group>
                        </van-radio-group>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="vip-input-box">
            <div class="vip-input-box-title">Age</div>
            <div class="vip-input-box-input">
              <van-field v-model="age" type="number" placeholder="Age" />
            </div>
          </div>
          <div class="vip-input-box">
            <div class="vip-input-box-title">Height</div>
            <div class="vip-input-box-input">
              <van-field v-model="height" type="number" placeholder="Height" />
            </div>
          </div>
          <div class="vip-input-box">
            <div class="vip-input-box-title">Email</div>
            <div class="vip-input-box-input">
              <van-field v-model="email" placeholder="Email" />
            </div>
          </div>
          <div class="vip-input-box" style="margin-bottom: 30px">
            <div class="vip-input-box-title">Telephone</div>
            <div class="vip-input-box-input">
              <van-field v-model="phone_number" placeholder="Telephone" />
            </div>
          </div>
        </div>
        <!-- vip -->
        <div class="Review-btn" v-if="!vipPublish">Review your ad</div>
        <div class="goBack-box">
          <div
            class="goDown-go"
            @click="
              stepThree = false
              stepOneAndTwo = true
            "
          >
            Previous step
          </div>
          <div class="goDown-back" @click="postDraft()">Continue</div>
        </div>
      </div>
      <!-- 步骤四的发布确认-->
      <div class="publish-box" v-if="stepFour">
        <div class="publish-info">
          <div class="publish-info-header">
            <div class="info-header-lf">4</div>
            <div class="info-header-rg">Publish</div>
          </div>
          <div class="publish-info-text">
            If your ad is not upgraded, only about 300 viewers can see your ad
            per day. If you want more customers please gain viewers. There will
            be no limited of the viewers if you gain viewers. There will be no
            limited of the viewers if you use Recommended ad or
          </div>
        </div>
        <div v-if="false" class="upgrade-days">
          <div class="upgrade-days-header">
            <div class="days-header-lf"></div>
            <div class="days-header-rg">buy ad's display time</div>
          </div>
          <div class="days-menu">
            <div class="days-item" @click="checked1 = !checked1">
              <div class="days-text" :class="{ activeDaysBg: checked1 }">
                5days
              </div>
              <div class="days-btn">
                <van-checkbox
                  v-model="checked1"
                  checked-color="#273458"
                  icon-size="20px"
                ></van-checkbox>
              </div>
            </div>
            <div class="days-item" @click="checked2 = !checked2">
              <div class="days-text" :class="{ activeDaysBg: checked2 }">
                10days
              </div>
              <div class="days-btn">
                <van-checkbox
                  v-model="checked2"
                  checked-color="#273458"
                  icon-size="20px"
                ></van-checkbox>
              </div>
            </div>
            <div class="days-item" @click="checked3 = !checked3">
              <div class="days-text" :class="{ activeDaysBg: checked3 }">
                20days
              </div>
              <div class="days-btn">
                <van-checkbox
                  v-model="checked3"
                  checked-color="#273458"
                  icon-size="20px"
                ></van-checkbox>
              </div>
            </div>
            <div class="days-item" @click="checked4 = !checked4">
              <div class="days-text" :class="{ activeDaysBg: checked4 }">
                30days
              </div>
              <div class="days-btn">
                <van-checkbox
                  v-model="checked4"
                  checked-color="#273458"
                  icon-size="20px"
                ></van-checkbox>
              </div>
            </div>
            <div class="days-item last-item" @click="checked5 = !checked5">
              <div class="days-text" :class="{ activeDaysBg: checked5 }">
                Automatic renewal
              </div>
              <div class="days-btn">
                <van-checkbox
                  v-model="checked5"
                  checked-color="#273458"
                  icon-size="20px"
                ></van-checkbox>
              </div>
            </div>
          </div>
          <div class="total-box">
            <div class="total-box-text">
              $:{{ dept_list_select_totol_days }}
            </div>
          </div>
        </div>
        <div class="my-ads-box">
          <div class="my-ads-header">
            <div class="my-ads-header-lf"></div>
            <div class="my-ads-header-rg">我的广告</div>
          </div>
          <div class="table-box">
            <table class="my-table">
              <tr v-for="item in dept_list_select" :key="item.deptId">
                <td class="col1">{{ category_text }}</td>
                <td class="col2">{{ item.deptName }}</td>
                <td class="col3">
                  普通广告{{ item.maney }}/{{ checked_days_text }}月
                </td>
              </tr>
              <tr
                v-for="item in dept_list_select_ad"
                :key="item.deptId + 'pt'"
                v-show="item.selected1 != 0"
              >
                <td class="col1">{{ category_text }}</td>
                <td class="col2">{{ item.deptName }}</td>
                <td class="col3">
                  推荐广告{{ item.recommendPrice * item.selected1 }}/{{
                    item.selected1
                  }}天
                </td>
              </tr>
              <tr
                v-for="item in dept_list_select_ad_top"
                :key="item.deptId + 'top'"
                v-show="item.selected2 != 0"
              >
                <td class="col1">{{ category_text }}</td>
                <td class="col2">{{ item.deptName }}</td>
                <td class="col3">
                  大图广告{{ item.largePrice * item.selected2 }}/{{
                    item.selected2
                  }}天
                </td>
              </tr>
            </table>
          </div>
          <div class="fee-text">
            广告费用：<span class="fee-num"
              >{{ dept_list_select_totol_days + totol_top_and_tuijian }}$</span
            >
          </div>
          <!-- <div class="sure-btn" @click="showReleasePopup">Confirm release</div> -->
          <div class="sure-btn" @click="PUT_apiPOSTadvertisement">
            Confirm release
          </div>
        </div>
      </div>
    </div>
    <van-popup v-model="showReleaseBox">
      <div class="questionPopup-box">
        <img
          @click="showReleaseBox = false"
          class="close-icon"
          src="../../assets/images/close-icon.png"
          alt=""
        />
        <div class="content">
          广告余额不足，请充值 <br />
          广告信息已保存到：我的广告-草稿箱
        </div>
        <div class="confirm-btn" @click="showReleaseBox = false">Got it</div>
      </div>
    </van-popup>

    <router-view />
    <van-tabbar route active-color="#027AFC" inactive-color="#666666">
      <van-tabbar-item replace to="/vip">
        <span> {{ $t('vip') }} </span>
        <template #icon="props">
          <img :src="props.active ? icon.active1 : icon.inactive1" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/">
        <span> {{ $t('home') }} </span>
        <template #icon="props">
          <img :src="props.active ? icon.active2 : icon.inactive2" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/postAd">
        <span> {{ $t('post AD') }} </span>
        <template #icon="props">
          <img :src="props.active ? icon.active3 : icon.inactive3" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/myAD">
        <span> {{ $t('my AD') }} </span>
        <template #icon="props">
          <img :src="props.active ? icon.active4 : icon.inactive4" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/personal">
        <span> {{ $t('profile') }} </span>
        <template #icon="props">
          <img :src="props.active ? icon.active5 : icon.inactive5" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import {
  apiAdvertisingClassification,
  apiOccupation,
  apiRace,
  apiLanguage,
  apiAvailable,
  apiUpload,
  apiConfigurationList,
  apiGetDeptList,
  apiGetDeptList_p,
  apiGetUserDeptTree,
  apiPOSTadvertisement,
  apiPOSTadvertisement_put,
  apiGetAdDetail,
} from '../../request/api'
import { Toast } from 'vant'
// 富文本
import Editor from '@tinymce/tinymce-vue'
// 富文本
import CUT from './Cut.vue'
export default {
  name: 'postAd',
  components: { 'tinymce-editor': Editor, CUT },
  data() {
    return {
      // 发布广告的id
      advertisementId: null,
      // advertisementRemarkOne 编辑器
      init_advertisementRemarkOne: {
        placeholder: 'Click to enter content ',
        // language_url: "/lib/js/zh_CN.js",
        // language: "zh_CN",
        height: 500,
        plugins: 'link lists image code table  wordcount ',
        // toolbar:
        //   "bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify|bullist numlist |outdent indent blockquote | undo redo | link unlink image code | removeformat",
        toolbar:
          'formatselect | bold italic underline strikethrough | fontsizeselect | forecolor backcolor ',
        branding: false,
        images_upload_handler: (blobInfo, success, failure) => {
          success('data:image/jpeg;base64,' + blobInfo.base64())
        },
        // 监听用户输入事件
        init_instance_callback: (editor) => {
          editor.on('input', (e) => {
            this.advertisementRemarkOne = editor.getContent()
          })
        },
      },
      // advertisementRemarkTwo 编辑器
      init_advertisementRemarkTwo: {
        placeholder: 'Click to enter content ',
        // language_url: "/lib/js/zh_CN.js",
        // language: "zh_CN",
        height: 500,
        plugins: 'link lists image code table  wordcount ',
        // toolbar:
        //   "bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify|bullist numlist |outdent indent blockquote | undo redo | link unlink image code | removeformat",
        toolbar:
          'formatselect | bold italic underline strikethrough | fontsizeselect | forecolor backcolor ',
        branding: false,
        images_upload_handler: (blobInfo, success, failure) => {
          success('data:image/jpeg;base64,' + blobInfo.base64())
        },
        // 监听用户输入事件
        init_instance_callback: (editor) => {
          editor.on('input', (e) => {
            this.advertisementRemarkTwo = editor.getContent()
          })
        },
      },
      // advertisementRemarkThree 编辑器
      init_advertisementRemarkThree: {
        placeholder: 'Click to enter content ',
        // language_url: "/lib/js/zh_CN.js",
        // language: "zh_CN",
        height: 500,
        plugins: 'link lists image code table  wordcount ',
        // toolbar:
        //   "bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify|bullist numlist |outdent indent blockquote | undo redo | link unlink image code | removeformat",
        toolbar:
          'formatselect | bold italic underline strikethrough | fontsizeselect | forecolor backcolor ',
        branding: false,
        images_upload_handler: (blobInfo, success, failure) => {
          success('data:image/jpeg;base64,' + blobInfo.base64())
        },
        // 监听用户输入事件
        init_instance_callback: (editor) => {
          editor.on('input', (e) => {
            this.advertisementRemarkThree = editor.getContent()
          })
        },
      },
      active: 0,
      icon: {
        active1: require('../../assets/images/tabbar/tabbar1.png'),
        inactive1: require('../../assets/images/tabbar/tabbar2.png'),
        active2: require('../../assets/images/tabbar/tabbar3.png'),
        inactive2: require('../../assets/images/tabbar/tabbar4.png'),
        active3: require('../../assets/images/tabbar/tabbar5.png'),
        inactive3: require('../../assets/images/tabbar/tabbar6.png'),
        active4: require('../../assets/images/tabbar/tabbar7.png'),
        inactive4: require('../../assets/images/tabbar/tabbar8.png'),
        active5: require('../../assets/images/tabbar/tabbar9.png'),
        inactive5: require('../../assets/images/tabbar/tabbar10.png'),
      },
      // 分类列表
      classificationList: [],
      category: '',
      // 步骤
      stepOneAndTwo: true,
      stepThree: false,
      stepFour: false,

      // 步骤三详情参数
      city_detail: '', // 城市名称
      city_street: '', // 城市街道
      city_number: '', // 城市街道号码
      phone_number: '', //电话号码
      age: '', //年龄
      height: '', //身高
      language: '', //语言
      languageName: '', //语言名称（展示）
      race: '', //种族
      raceName: '', //种族名称（展示）
      occupation: '', //职业
      occupationName: '', //职业名称（展示）
      available: '',
      introduce: '', //多行文本输入介绍部分
      type: [], //升级广告类型
      // 语言列表
      languageList: [],
      // 种族列表
      raceList: [],
      // 职业列表
      occupationList: [],
      // Available列表
      availableList: [],
      // 控制语言\种族/职业下拉框
      showLanguageBox: false,
      showRaceBox: false,
      showOccupationBox: false,
      images_one: '',
      images_two: '',
      images_three: '',
      images_four: '',
      images_five: '',
      images_six: '',
      images_seven: '',
      images_eight: '',
      images_nine: '',
      // 普通、店铺、vip发布
      normalPublish: true,
      shopPublish: false,
      vipPublish: false,
      shopname: '', //商铺名称
      table_shower: '', //table_shower
      sauna: '',
      jacuzzi: '',
      accept_credit_card: '',
      ratefor30: '',
      ratefor45: '',
      ratefor60: '',
      payment: '', //付款方式
      // 店铺
      mondayAm: '',
      tuesdayAm: '',
      wednesdayAm: '',
      thursdayAm: '',
      fridayAm: '',
      saturdayAm: '',
      sundayAm: '',
      mondayPm: '',
      tuesdayPm: '',
      wednesdayPm: '',
      thursdayPm: '',
      fridayPm: '',
      saturdayPm: '',
      sundayPm: '',
      // vip
      name: '',
      email: '',
      advertisementTitleOne: '',
      advertisementTitleTwo: '',
      advertisementTitleThree: '',
      advertisementRemarkOne: '',
      advertisementRemarkTwo: '',
      advertisementRemarkThree: '',
      // 选择升级几天
      checked1: false,
      checked2: false,
      checked3: false,
      checked4: false,
      checked5: false,
      // 确认发布弹框
      showReleaseBox: false,
      show_are: false, //步骤二下拉框弹出
      show_are_maney: false, //步骤二下拉框弹出2
      deptTree: [], //步骤二地址树形数据
      dept_list: [], //步骤二地址数据
      deptTree_select: 'Please select your city', //步骤二地址选择
      deptTree_select_id: '', //步骤二地址选择_id
      dept_list_select: [], //步骤二地址选择2
      dept_list_select_totol: 0, //步骤二地址选择2 统计
      dept_list_select_totol_days: 0, // 统计乘以天数
      configurationList: [], // 金额数据及系统配置获取接口-数据
      dept_list_select_ad: [], //步骤三地址选择2 ==》ad选择推荐广告
      dept_list_select_ad_top: [], //步骤三地址选择2 ==》ad选择大图广告
      cityData: [],
      recommendImageOne: '',
      recommendImageTwo: '',
      recommendImageThree: '',
      largeImage: '',
      selected1: '0',
      selected2: '0',
    }
  },
  computed: {
    // 换算category 类型 id变题目
    category_text() {
      let category = this.category
      let dictLabel = null
      this.classificationList.forEach((element, index) => {
        if (element.dictValue == category) {
          dictLabel = element.dictLabel
        } else {
        }
      })
      return dictLabel
    },
    // 换算天数为文字
    checked_days_text() {
      if (this.checked1) {
        return 5
      } else if (this.checked2) {
        return 10
      } else if (this.checked3) {
        return 20
      } else if (this.checked4) {
        return 30
      }
    },
    // 计算推荐和大图
    totol_top_and_tuijian() {
      let totol = 0
      this.dept_list_select_ad.forEach((element, index) => {
        totol += element.recommendPrice * element.selected1
      })
      this.dept_list_select_ad_top.forEach((element, index) => {
        totol += element.largePrice * element.selected2
      })
      console.log(
        this.dept_list_select_ad,
        this.dept_list_select_ad_top,
        '--------++++++++',
        totol,
        '-==+++>>>>>>'
      )
      return totol
    },
  },
  watch: {
    type(newVal) {
      if (newVal) {
        this.dept_list_select_ad.forEach((element, index) => {
          console.log(element.selected1, '---------')
          this.dept_list_select_ad[index].selected = '0'
          if (this.type.indexOf('3') !== -1) {
            this.dept_list_select_ad[index].selected1 =
              element.selected1 === '0' ? '10' : element.selected1
          } else {
            this.dept_list_select_ad[index].selected1 = '0'
          }
        })
        this.dept_list_select_ad_top.forEach((element, index) => {
          this.dept_list_select_ad_top[index].selected = '0'
          if (this.type.indexOf('2') !== -1) {
            this.dept_list_select_ad_top[index].selected2 =
              element.selected2 === '0' ? '10' : element.selected2
          } else {
            this.dept_list_select_ad_top[index].selected2 = '0'
          }
        })
      }
    },
    checked1(e) {
      if (e) {
        this.dept_list_select_totol_days = this.dept_list_select_totol * 5
        this.checked2 = false
        this.checked3 = false
        this.checked4 = false
        this.checked5 = false
      }
    },
    checked2(e) {
      if (e) {
        this.dept_list_select_totol_days = this.dept_list_select_totol * 10
        this.checked1 = false
        this.checked3 = false
        this.checked4 = false
        this.checked5 = false
      }
    },
    checked3(e) {
      if (e) {
        this.dept_list_select_totol_days = this.dept_list_select_totol * 20
        this.checked1 = false
        this.checked2 = false
        this.checked4 = false
        this.checked5 = false
      }
    },
    checked4(e) {
      if (e) {
        this.dept_list_select_totol_days = this.dept_list_select_totol * 30
        this.checked1 = false
        this.checked2 = false
        this.checked3 = false
        this.checked5 = false
      }
    },
    checked5(e) {
      if (e) {
        this.dept_list_select_totol_days = this.dept_list_select_totol * 1
        this.checked1 = false
        this.checked2 = false
        this.checked3 = false
        this.checked4 = false
      }
    },
  },
  created() {
    let token = localStorage.getItem('key')
    if (!token) {
      this.$router.replace('/login')
    }

    // 我的广告再次编辑传来广告id后获取详情
    let adId = this.$route.query.advertisementId
    console.log('adId' + adId)
    if (adId) {
      apiGetAdDetail(adId).then((res) => {
        if (res.code == 200) {
          console.log('广告详情' + res)
          this.category = res.data.category
          this.deptTree_select_id = res.data.city
          this.city_detail = res.data.cityDetail
          this.age = res.data.age
          this.height = res.data.langeuage
          this.race = res.data.race
          this.occupation = res.data.occupation
          this.available = res.data.available
          this.phone_number = res.data.phoneNumber
          this.images_one = res.data.imagesOne
          this.images_two = res.data.imagesTwo
          this.images_three = res.data.imagesThree
          this.images_four = res.data.imagesFour
          this.images_five = res.data.imagesFive
          this.images_six = res.data.imagesSix
          this.images_seven = res.data.imagesSeven
          this.images_eight = res.data.imagesEight
          this.images_nine = res.data.imagesNine
          this.recommendImageOne = recommendImageOne
          this.recommendImageTwo = recommendImageTwo
          this.recommendImageThree = recommendImageThree
          this.largeImage = largeImage
          this.introduce = res.data.introduce
          this.cityData = res.data.cityData
          this.advertisementId = res.data.advertisementId
          this.shopname = res.data.shopname
          this.table_shower = res.data.tableShower
          this.sauna = res.data.sauna
          this.jacuzzi = res.data.jacuzzi
          this.accept_credit_card = res.data.acceptCreditCard
          this.ratefor30 = res.data.ratefor30
          this.ratefor45 = res.data.ratefor45
          this.ratefor60 = res.data.ratefor60
          this.payment = res.data.payment
          this.mondayAm = res.data.mondayAm
          this.thursdayAm = res.data.tuesdayAm
          this.wednesdayAm = res.data.wednesdayAm
          this.thursdayAm = res.data.thursdayAm
          this.fridayAm = res.data.fridayAm
          this.saturdayAm = res.data.saturdayAm
          this.sundayAm = res.data.sundayAm
          this.mondayPm = res.data.mondayPm
          this.tuesdayPm = res.data.tuesdayPm
          this.wednesdayPm = res.data.wednesdayPm
          this.thursdayPm = res.data.thursdayPm
          this.fridayPm = res.data.fridayPm
          this.saturdayPm = res.data.saturdayPm
          this.saturdayPm = res.data.sundayPm
          this.name = res.data.name
          this.email = res.data.email
          this.advertisementTitleOne = res.data.advertisementTitleOne
          this.advertisementTitleTwo = res.data.advertisementTitleTwo
          this.advertisementTitleThree = res.data.advertisementTitleThree
          this.advertisementRemarkOne = res.data.advertisementRemarkOne
          this.advertisementRemarkTwo = res.data.advertisementRemarkTwo
          this.advertisementRemarkThree = res.data.advertisementRemarkThree
          this.dept_list_select = res.data.cityData
          // 地址数据获取
          let dizhi_list = []
          apiGetDeptList_p().then((res) => {
            if (res.code == 200) {
              console.log('地址数据获取===>', res.data)
              dizhi_list = res.data
              this.dept_list_select.forEach((element, index) => {
                console.log(element)
                dizhi_list.forEach((item, indey) => {
                  if (element.cityld == item.deptId) {
                    this.dept_list_select[index].maney = item.maney
                    this.dept_list_select[index].deptName = item.deptName
                  }
                })
              })
              this.Change_dept_list_select(this.dept_list_select)
              this.goStepThree()
            }
          })
          console.log(this.dept_list_select)
        }
      })
    }

    // 类型分类
    apiAdvertisingClassification().then((res) => {
      if (res.code == 200) {
        this.classificationList = res.data
        // console.log(this.classificationList);
      }
    })
    apiOccupation().then((res) => {
      if (res.code == 200) {
        this.occupationList = res.data
      }
    })
    apiRace().then((res) => {
      if (res.code == 200) {
        this.raceList = res.data
      }
    })
    apiLanguage().then((res) => {
      if (res.code == 200) {
        this.languageList = res.data
      }
    })
    apiAvailable().then((res) => {
      if (res.code == 200) {
        this.availableList = res.data
      }
    })
    // 金额数据及系统配置获取接口
    apiConfigurationList().then((res) => {
      if (res.code == 200) {
        console.log('金额数据及系统配置获取接口', res)
        this.configurationList = res.rows
      }
    })
    // 地址数据获取
    apiGetDeptList().then((res) => {
      if (res.code == 200) {
        // console.log("地址数据获取", res.data);
        // this.dept_list = res.data;
      }
    })
    // 地址树形数据获取
    apiGetUserDeptTree().then((res) => {
      if (res.code == 200) {
        console.log('地址树形数据获取', res)
        this.deptTree = res.data
      }
    })
  },
  mounted() {},
  methods: {
    // 选择语言
    chooseLanguage(item) {
      this.language = item.dictValue
      this.languageName = item.dictLabel
      this.showLanguageBox = false
    },
    // 选择种族
    chooseRace(item) {
      this.race = item.dictValue
      this.raceName = item.dictLabel
      this.showRaceBox = false
    },
    // 选择职业
    chooseOccupation(item) {
      this.occupation = item.dictValue
      this.occupationName = item.dictLabel
      this.showOccupationBox = false
    },
    // vip选择种族
    vipChooseRace(item) {
      this.race = item.dictValue
      this.raceName = item.dictLabel
      this.showRaceBox = false
    },
    UpUrl(data) {
      console.log(data)
      if (data.name == 'recommendImageOne') {
        this.recommendImageOne = data.url
      } else if (data.name == 'recommendImageTwo') {
        this.recommendImageTwo = data.url
      } else if (data.name == 'recommendImageThree') {
        this.recommendImageThree = data.url
      } else if (data.name == 'largeImage') {
        this.largeImage = data.url
      } else if (data.name == 'images_one') {
        this.images_one = data.url
      }
    },
    onClickLeft() {
      if (this.stepOneAndTwo) {
        Toast("It's already the first step")
      } else if (this.stepThree) {
        this.stepThree = false
        this.stepOneAndTwo = true
      } else if (this.stepFour) {
        this.stepFour = false
        this.stepThree = true
      } else {
        this.$router.go(-1)
      }
    },
    goStepThree() {
      let _this = this
      // 跳转发生的方法
      function GOTO() {
        _this.stepOneAndTwo = false
        _this.stepThree = true
        _this.dept_list_select_ad = _this.dept_list_select
        _this.dept_list_select_ad_top = _this.dept_list_select
        _this.dept_list_select_ad.forEach((element, index) => {
          _this.dept_list_select_ad[index].selected = '0'
          if (_this.type.indexOf('3') !== -1) {
            _this.dept_list_select_ad[index].selected1 = '10'
          } else {
            _this.dept_list_select_ad[index].selected1 = '0'
          }
        })
        _this.dept_list_select_ad_top.forEach((element, index) => {
          _this.dept_list_select_ad_top[index].selected = '0'
          if (_this.type.indexOf('2') !== -1) {
            _this.dept_list_select_ad_top[index].selected2 = '10'
          } else {
            _this.dept_list_select_ad_top[index].selected2 = '0'
          }
        })
        console.log(_this.dept_list_select_ad, _this.dept_list_select_ad_top)
      }
      if (this.category == '') {
        Toast('Please select category')
      } else if (this.category == 5) {
        // 去店铺
        this.normalPublish = false
        this.shopPublish = true
        this.vipPublish = false
        GOTO()
      } else if (this.category == 8) {
        // 去vip
        this.normalPublish = false
        this.shopPublish = false
        this.vipPublish = true
        GOTO()
      } else {
        // 去普通
        this.normalPublish = true
        this.shopPublish = false
        this.vipPublish = false
        this.city_detail = this.deptTree_select
        // if (this.deptTree_select == "Please select your city") {
        //   Toast("Please select your city");
        // } else {
        //   GOTO();
        // }
        if (this.deptTree_select_id == '') {
          Toast('Please select your city')
        } else {
          GOTO()
        }
      }
    },
    showReleasePopup() {
      this.showReleaseBox = true
    },
    // 选择分类
    checkClassification(item) {
      this.category = item.dictValue
      console.log('选择分类,category:' + this.category)
    },
    // //步骤二地址选择
    Check_deptTree_select(item) {
      this.deptTree_select = item.label
      this.deptTree_select_id = item.id
      this.show_are = false
      this.show_are_maney = true
      console.log(
        '步骤二地址选择  ' +
          this.deptTree_select +
          '  ' +
          this.deptTree_select_id
      )
      // 地址数据获取
      apiGetDeptList_p({
        parentId: this.deptTree_select_id,
        category: this.category,
      }).then((res) => {
        if (res.code == 200) {
          console.log('地址数据获取', res.data)
          this.dept_list = res.data
        }
      })
    },
    // //步骤二地址选择变化处理统计
    Change_dept_list_select(e) {
      console.log('地址选择变化数组summary', e)
      let dept_list_select_totol = 0
      e.forEach((element) => {
        dept_list_select_totol += Number(element.maney)
      })
      this.dept_list_select_totol = dept_list_select_totol
    },
    // 上传图片
    uploadFile1(file) {
      const formData = new FormData()
      formData.append('file', file.file)
      apiUpload(formData).then((res) => {
        if (res.code == 200) {
          this.images_one = res.url
        }
      })
    },
    uploadFile2(file) {
      const formData = new FormData()
      formData.append('file', file.file)
      apiUpload(formData).then((res) => {
        if (res.code == 200) {
          this.images_two = res.url
        }
      })
    },
    uploadFile3(file) {
      const formData = new FormData()
      formData.append('file', file.file)
      apiUpload(formData).then((res) => {
        if (res.code == 200) {
          this.images_three = res.url
        }
      })
    },
    uploadFile4(file) {
      const formData = new FormData()
      formData.append('file', file.file)
      apiUpload(formData).then((res) => {
        if (res.code == 200) {
          this.images_four = res.url
        }
      })
    },
    uploadFile5(file) {
      const formData = new FormData()
      formData.append('file', file.file)
      apiUpload(formData).then((res) => {
        if (res.code == 200) {
          this.images_five = res.url
        }
      })
    },
    uploadFile6(file) {
      const formData = new FormData()
      formData.append('file', file.file)
      apiUpload(formData).then((res) => {
        if (res.code == 200) {
          this.images_six = res.url
        }
      })
    },
    uploadFile7(file) {
      const formData = new FormData()
      formData.append('file', file.file)
      apiUpload(formData).then((res) => {
        if (res.code == 200) {
          this.images_seven = res.url
        }
      })
    },
    uploadFile8(file) {
      const formData = new FormData()
      formData.append('file', file.file)
      apiUpload(formData).then((res) => {
        if (res.code == 200) {
          this.images_eight = res.url
        }
      })
    },
    uploadFile9(file) {
      const formData = new FormData()
      formData.append('file', file.file)
      apiUpload(formData).then((res) => {
        if (res.code == 200) {
          this.images_nine = res.url
        }
      })
    },

    postDraft() {
      if (this.normalPublish) {
        if (
          this.age == '' ||
          this.height == '' ||
          this.race == '' ||
          this.available == '' ||
          this.images_one == '' ||
          this.images_two == '' ||
          this.images_three == ''
        ) {
          this.$toast.fail('Please fill it out completely')
          return
        }
      } else if (this.shopPublish) {
        if (
          this.images_one == '' ||
          this.images_two == '' ||
          this.images_three == ''
        ) {
          this.$toast.fail('Please fill it out completely')
          return
        }
      } else {
        if (
          this.age == '' ||
          this.height == '' ||
          this.race == '' ||
          this.images_one == '' ||
          this.images_two == '' ||
          this.images_three == ''
        ) {
          this.$toast.fail('Please fill it out completely')
          return
        }
      }

      this.stepThree = false
      this.stepFour = true
      this.dept_list_select_totol_days = this.dept_list_select_totol
      let adId = this.$route.query.advertisementId
      console.log('adId' + adId)
      if (adId) {
        this.PUT_apiPOSTadvertisement()
        return
      }
      this.POST_apiPOSTadvertisement()
    },
    //发布广告接口  === 草稿
    POST_apiPOSTadvertisement() {
      let upgrade = this.checked_days_text
      let cityData = []
      this.dept_list_select.forEach((element, index) => {
        let data = {
          european: element.deptName,
          street: element.city_street,
          number: element.city_number,
          fillin: element.phone_number,
          cityId: element.parentId,
          upgrade: upgrade,
        }
        cityData.push(data)
      })
      let type = ''
      this.type.forEach((e, index) => {
        if (index == this.type.length - 1) {
          type += e
        } else {
          type += e + ','
        }
      })
      if (this.type.length === 0) {
        type = '1'
      }
      apiPOSTadvertisement({
        category: this.category,
        city: this.deptTree_select_id,
        cityDetail: this.city_detail,
        age: this.age,
        height: this.height,
        langeuage: this.language,
        race: this.race,
        occupation: this.occupation,
        available: this.available,
        phoneNumber: this.phone_number,
        imagesOne: this.images_one,
        imagesTwo: this.images_two,
        imagesThree: this.images_three,
        imagesFour: this.images_four,
        imagesFive: this.images_five,
        imagesSix: this.images_six,
        imagesSeven: this.images_seven,
        imagesEight: this.images_eight,
        imagesNine: this.images_nine,
        recommendImageOne: this.recommendImageOne,
        recommendImageTwo: this.recommendImageTwo,
        recommendImageThree: this.recommendImageThree,
        largeImage: this.largeImage,
        introduce: this.introduce,
        cityData: cityData,
        type: type,
        // 店铺
        shopname: this.shopname, //商铺名称
        tableShower: this.table_shower, //table_shower
        sauna: this.sauna,
        jacuzzi: this.jacuzzi,
        acceptCreditCard: this.accept_credit_card,
        ratefor30: this.ratefor30,
        ratefor45: this.ratefor45,
        ratefor60: this.ratefor60,
        payment: this.payment, //付款方式
        mondayAm: this.mondayAm,
        tuesdayAm: this.thursdayAm,
        wednesdayAm: this.wednesdayAm,
        thursdayAm: this.thursdayAm,
        fridayAm: this.fridayAm,
        saturdayAm: this.saturdayAm,
        sundayAm: this.sundayAm,
        mondayPm: this.mondayPm,
        tuesdayPm: this.tuesdayPm,
        wednesdayPm: this.wednesdayPm,
        thursdayPm: this.thursdayPm,
        fridayPm: this.fridayPm,
        saturdayPm: this.saturdayPm,
        sundayPm: this.saturdayPm,
        // vip
        name: this.name,
        email: this.email,
        advertisementTitleOne: this.advertisementTitleOne,
        advertisementTitleTwo: this.advertisementTitleTwo,
        advertisementTitleThree: this.advertisementTitleThree,
        advertisementRemarkOne: this.advertisementRemarkOne,
        advertisementRemarkTwo: this.advertisementRemarkTwo,
        advertisementRemarkThree: this.advertisementRemarkThree,
      }).then((res) => {
        if (res.code == 200) {
          Toast.success(res.msg)
          this.advertisementId = res.data
          // setTimeout(() => {
          //   this.$router.push("/myAD");
          // }, 2000);
        } else {
          Toast.fail(res.msg)
        }
      })
    },
    //发布广告接口  ==编辑
    PUT_apiPOSTadvertisement() {
      let adId = this.$route.query.advertisementId
      if (!adId) {
        let upgrade = this.checked_days_text
        this.cityData = []
        this.dept_list_select.forEach((element, index) => {
          let data = {
            european: element.deptName,
            street: element.city_street,
            number: element.city_number,
            fillin: element.phone_number,
            cityId: element.parentId,
            upgrade: upgrade,
          }
          this.cityData.push(data)
        })
      }
      let type = ''
      this.type.forEach((e, index) => {
        if (index == this.type.length - 1) {
          type += e
        } else {
          type += e + ','
        }
      })
      if (this.type.length === 0) {
        type = '1'
      }
      apiPOSTadvertisement_put({
        advertisementMoney:
          this.dept_list_select_totol_days + this.totol_top_and_tuijian,
        category: this.category,
        city: this.deptTree_select_id,
        cityDetail: this.city_detail,
        age: this.age,
        height: this.height,
        langeuage: this.language,
        race: this.race,
        occupation: this.occupation,
        available: this.available,
        phoneNumber: this.phone_number,
        imagesOne: this.images_one,
        imagesTwo: this.images_two,
        imagesThree: this.images_three,
        imagesFour: this.images_four,
        imagesFive: this.images_five,
        imagesSix: this.images_six,
        imagesSeven: this.images_seven,
        imagesEight: this.images_eight,
        imagesNine: this.images_nine,
        recommendImageOne: this.recommendImageOne,
        recommendImageTwo: this.recommendImageTwo,
        recommendImageThree: this.recommendImageThree,
        largeImage: this.largeImage,
        introduce: this.introduce,
        cityData: this.cityData,
        // PUT字段
        type: type,
        advertisementId: this.advertisementId,
        status: 1,
        // 店铺
        shopname: this.shopname, //商铺名称
        tableShower: this.table_shower, //table_shower
        sauna: this.sauna,
        jacuzzi: this.jacuzzi,
        acceptCreditCard: this.accept_credit_card,
        ratefor30: this.ratefor30,
        ratefor45: this.ratefor45,
        ratefor60: this.ratefor60,
        payment: this.payment,
        mondayAm: this.mondayAm,
        tuesdayAm: this.thursdayAm,
        wednesdayAm: this.wednesdayAm,
        thursdayAm: this.thursdayAm,
        fridayAm: this.fridayAm,
        saturdayAm: this.saturdayAm,
        sundayAm: this.sundayAm,
        mondayPm: this.mondayPm,
        tuesdayPm: this.tuesdayPm,
        wednesdayPm: this.wednesdayPm,
        thursdayPm: this.thursdayPm,
        fridayPm: this.fridayPm,
        saturdayPm: this.saturdayPm,
        sundayPm: this.saturdayPm,
        // vip
        name: this.name,
        email: this.email,
        advertisementTitleOne: this.advertisementTitleOne,
        advertisementTitleTwo: this.advertisementTitleTwo,
        advertisementTitleThree: this.advertisementTitleThree,
        advertisementRemarkOne: this.advertisementRemarkOne,
        advertisementRemarkTwo: this.advertisementRemarkTwo,
        advertisementRemarkThree: this.advertisementRemarkThree,
      }).then((res) => {
        if (res.code == 200) {
          Toast.success(res.msg)
          this.advertisementId = res.data
          // setTimeout(() => {
          //   this.$router.push("/myAD");
          // }, 2000);
        } else {
          Toast.fail(res.msg)
        }
      })
    },
    chooseRecommend(item) {
      this.selected1 = item
      // this.dept_list_select_ad.forEach((element, index) => {
      //   this.dept_list_select_ad[index].selected1 = item
      // })
      this.dept_list_select_ad.map((x) => {
        x.selected1 = item
        return x
      })
    },
    chooseRecommend1(item) {
      this.selected2 = item
      // this.dept_list_select_ad_top.forEach((element, index) => {
      //   this.dept_list_select_ad_top[index].selected2 = item
      // })
      this.dept_list_select_ad_top.map((x) => {
        x.selected2 = item
        return x
      })
    },
    chooseType(type) {
      this.selected1 = this.dept_list_select_ad[0].selected1
      // if (type.indexOf('3') !== -1) {
      //   this.selected1 = '10'
      // } else {
      //   this.selected1 = '0'
      // }
    },
    chooseType1(type) {
      this.selected2 = this.dept_list_select_ad_top[0].selected2
      // if (type.indexOf('2') !== -1) {
      //   this.selected2 = '10'
      // } else {
      //   this.selected2 = '0'
      // }
    },
  },
}
</script>

<style lang="scss" scoped>
.page {
  background: #ebebeb;
  padding-bottom: 240px;
}
.content {
  padding: 0 24px;
  margin-bottom: 120px;
}
.step-box {
  margin: 20px 0;
  background: #ffffff;
  padding: 27px 40px 34px;
  .step-title {
    font-size: 28px;
    font-weight: 400;
    color: #000000;
    text-align: center;
  }
  .step-imgBox {
    margin-top: 39px;
    display: flex;
    align-items: center;
  }
  .step-imgBox-img {
    width: 73px;
    height: 73px;
  }
  .green-line {
    width: 78px;
    height: 0px;
    border: 2px solid #21b66d;
    margin: 0 16px;
  }
  .black-line {
    width: 78px;
    height: 0px;
    margin: 0 16px;
    border: 2px solid #232f3e;
  }
  .step-textBox {
    margin-top: 22px;
    font-size: 28px;
    font-weight: 400;
    color: #000000;
  }
  .step-text1 {
    margin-right: 51px;
  }
  .step-text2 {
    margin-right: 91px;
  }
  .step-text3 {
    margin-right: 88px;
  }
}
.category-box {
  padding: 30px 40px 50px;
  background: #fff;
  .category-header {
    display: flex;
    align-items: center;
  }
  .category-box-img {
    width: 73px;
    height: 73px;
  }
  .category-header-title {
    margin-left: 24px;
    font-size: 28px;
    font-weight: bold;
    color: #000000;
  }
  .choose-info {
    font-size: 24px;
    font-weight: 400;
    color: #000000;
    margin: 30px 0 23px;
  }
  .category-item {
    margin-bottom: 20px;
    padding: 24px 0 24px 35px;
    font-size: 24px;
    font-weight: bold;
    background: #f3f3f3;
    color: #000000;
  }
  .activeCategoryBg {
    background: #273458;
    color: #fff;
  }
}
.location-box {
  padding: 30px 40px 50px;
  margin-top: 20px;
  background: #fff;
  .location-header {
    display: flex;
    align-items: center;
  }
  .location-box-img {
    width: 73px;
    height: 73px;
  }
  .location-header-title {
    margin-left: 24px;
    font-size: 28px;
    font-weight: bold;
    color: #000000;
  }
  .location-info {
    font-size: 24px;
    font-weight: 400;
    color: #000000;
    margin: 30px 0 23px;
  }
  .confirm-btn {
    height: 90px;
    font-size: 24px;
    font-weight: bold;
    color: #ffffff;
    margin: 45px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 408px;
    background: #273458;
    box-shadow: 0px 3px 12px 1px rgba(71, 71, 71, 0.16);
  }
  .showRight-box {
    position: relative;
    margin: 20px 0;
    padding: 10px;
    .area-flex-box {
      height: 80px;
      background: #ffffff;
      border: 1px solid rgba(112, 112, 112, 0.34);
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px;
    }
    .area-box-lf {
      font-size: 28px;
      font-weight: 400;
      color: #242424;
    }
    .area-box-rg {
      img {
        width: 0.64rem;
        height: 0.64rem;
      }
    }
  }
}
.publish-box {
  .publish-info {
    padding: 30px 40px;
    background: #fff;
  }
  .publish-info-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  .info-header-lf {
    width: 72px;
    height: 73px;
    background: #273458;
    border-radius: 50%;
    font-size: 35px;
    font-weight: 400;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 24px;
  }
  .info-header-rg {
    font-size: 28px;
    font-weight: bold;
    color: #000000;
  }
  .publish-info-text {
    font-size: 24px;
    font-weight: 400;
    color: #000000;
  }
  .upgrade-days {
    margin-top: 20px;
    padding: 28px 40px 16px;
    background: #fff;
  }
  .upgrade-days-header {
    display: flex;
    align-items: center;
    margin-bottom: 47px;
  }
  .days-header-lf {
    width: 4px;
    height: 34px;
    background: #273458;
    margin-right: 20px;
  }
  .days-header-rg {
    font-size: 28px;
    font-weight: bold;
    color: #000000;
  }
  .days-menu {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
  .days-item {
    width: 33.3%;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
  }
  .days-text {
    height: 50px;
    border: 1px solid #bab2b2;
    background: #fff;
    font-size: 24px;
    font-weight: bold;
    color: #1f1a17;
    padding: 9px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 14px;
  }
  .activeDaysBg {
    border: 1px solid #273458;
    background: #273458;
    color: #fff;
  }
  .last-item {
    flex: 1;
  }
  .total-box {
    margin: 20px 0;
    display: flex;
    justify-content: flex-end;
  }
  .total-box-text {
    background: #273458;
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    padding: 10px 20px;
    min-width: 140px;
    text-align: center;
  }
  .my-ads-box {
    margin: 20px 0;
    padding: 24px 40px 40px;
    background: #fff;
  }
  .my-ads-header {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
  }
  .my-ads-header-lf {
    width: 4px;
    height: 34px;
    background: #273458;
    margin-right: 20px;
  }
  .my-ads-header-rg {
    font-size: 28px;
    font-weight: bold;
    color: #000000;
  }

  .table-box {
    margin-bottom: 57px;
  }
  .my-table {
    border-collapse: collapse;
    width: 100%;
  }
  .my-table td {
    text-align: center;
    vertical-align: middle;
    font-size: 24px;
    font-weight: 400;
    color: #000000;
  }
  .col1 {
    width: 25%;
  }
  .col2 {
    width: 30%;
  }
  .col3 {
    width: 45%;
  }
  .col1,
  .col2,
  .col3 {
    height: 70px;
    border: 1px solid #707070;
  }
  .fee-text {
    font-size: 34px;
    font-weight: 400;
    color: #000000;
    text-align: center;
    margin-bottom: 55px;
  }
  .fee-num {
    font-size: 34px;
    font-weight: 800;
    color: #000000;
  }
  .sure-btn {
    margin: 0 auto 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    color: #ffffff;
    width: 408px;
    height: 90px;
    background: #273458;
    box-shadow: 0px 3px 12px 1px rgba(71, 71, 71, 0.16);
  }
}
// 弹窗
.questionPopup-box {
  width: 567px;
  background: #ffffff;
  .close-icon {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 35px;
    height: 35px;
  }
  .content {
    margin: 21px 35px;
    padding: 15px;
    height: 247px;
    background: #ffffff;
    font-size: 26px;
    font-weight: 400;
    color: #232f3e;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .confirm-btn {
    margin: 21px 35px 35px;
    height: 70px;
    width: 498px;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #ffffff;
    background: #273458;
    box-shadow: 0px 3px 12px 1px rgba(71, 71, 71, 0.16);
  }
}

// 普通店铺详情
.normal-box {
  .normal-city-iptBox {
    background: #fff;
    padding: 40px;
  }
  .city-info {
    font-size: 24px;
    font-weight: 400;
    color: #000000;
    margin-bottom: 55px;
  }
  .city-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  .city-three-img {
    width: 73px;
    height: 73px;
    margin-right: 25px;
  }
  .header-rg-p1 {
    font-size: 28px;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #000000;
  }
  .header-rg-p2 {
    font-size: 24px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #000000;
  }
  .city-title {
    font-size: 28px;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #000000;
    margin-bottom: 20px;
  }
  .city-ipt {
    height: 80px;
    align-items: center;

    border: 1px solid #e2e2e2;
  }
  :deep(.van-field__control) {
    font-size: 28px;
  }
  .city-detail-info {
    font-size: 24px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #000000;
    margin: 30px 0 20px;
  }
  .ipt-flexBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .flexBox-lf {
    width: 50%;
    margin-right: 8px;
  }
  .flexBox-rg {
    width: 50%;
    margin-left: 8px;
  }
  .num-info {
    margin: 30px 0 20px;
    font-size: 24px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #000000;
  }
}
.normal-person-iptBox {
  background: #fff;
  margin-top: 20px;
  padding: 40px;
  .ipt-flexBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
  }
  .flexBox-lf {
    width: 50%;
    margin-right: 8px;
  }
  .flexBox-rg {
    width: 50%;
    margin-left: 8px;
  }
  .ipt-title {
    font-size: 24px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #000000;
    margin-bottom: 10px;
  }
  .lang-box {
    position: relative;
    .area-flex-box {
      height: 80px;
      background: #ffffff;
      border: 1px solid rgba(112, 112, 112, 0.34);
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .area-box-lf {
      font-size: 28px;
      font-weight: 400;
      color: #242424;
    }
    .bottom-icon-bl-img {
      width: 48px;
      height: 48px;
    }
    .location-select-box {
      position: absolute;
      z-index: 1;
      background: #fff;
      padding: 20px;
      left: 0;
      right: 0;
    }
    .location-ipt {
      height: 81px;
      align-items: center;
    }
    :deep(.van-field__control) {
      font-size: 28px;
    }
    .location-list {
      margin-bottom: 40px;
    }
    .location-list-title {
      font-size: 30px;
      font-weight: bold;
      color: #000000;
    }
    .state-cell {
      box-sizing: border-box;
      padding: 26px 0;
      overflow: hidden;
      font-size: 28px;
      font-weight: 400;
      color: #000000;
    }
    .state-value {
      font-size: 28px;
      font-weight: 400;
      color: #000000;
      text-align: center;
    }
    .city-cell {
      box-sizing: border-box;
      padding: 26px 0;
      overflow: hidden;
      font-size: 24px;
      font-weight: 400;
      color: #989898;
    }
    .city-value {
      font-size: 24px;
      font-weight: 400;
      color: #989898;
      text-align: center;
    }
  }
  .availability-box {
    margin: 20px 0;
  }
  .available-radio {
    margin-right: 30px;
  }
}
.normal-adType-box {
  margin-top: 20px;
  padding: 30px 20px;
  background: #fff;
  .adType-header {
    display: flex;
  }
  .ad-header-lf {
    margin-right: 20px;
  }
  .ad-header-img {
    width: 280px;
    height: 280px;
  }
  .rg {
    flex: 1;
    position: relative;
  }
  .ad-header-rg-1 {
    font-size: 30px;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #000000;
    margin-bottom: 15px;
  }
  .ad-header-rg-2 {
    font-size: 24px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    margin-bottom: 60px;
    color: #000000;
  }
  .ad-header-rg-3 {
    font-size: 26px;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #000000;
    text-align: right;
  }
  .adType-line {
    height: 0px;
    margin: 30px 0;
    opacity: 0.23;
    border: 1px solid #707070;
  }
  .type-upgrade-box {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
  }
  .upgrade-box {
    height: 70px;
    background: #273458;
    width: 449px;
    font-size: 28px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 30px;
  }
  .price-box {
    border: 1px solid #707070;
    height: 70px;
    display: flex;
    align-items: center;
  }
  .price-box-1 {
    width: 26%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #000000;
  }
  .price-box-2 {
    width: 37%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid #707070;
    height: 70px;
    font-size: 24px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #000000;
    border-right: 1px solid #707070;
  }
  .price-box-3 {
    width: 37%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #000000;
  }
  .price-box-two {
    border-top: none;
  }
  .upload-title {
    font-size: 28px;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #000000;
    margin-bottom: 22px;
  }
  .upload-info {
    font-size: 24px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #000000;
    margin-bottom: 8px;
  }
  .upload-img-box {
    margin: 40px 0;
  }
  .upload-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .upload-item-box {
    border: 1px solid #707070;
    width: calc(33.3% - 22px);
    height: 204px;
    margin-bottom: 22px;
    position: relative;
  }
  .text-area-box {
    margin: 20px 0;
    height: 359px;
    border: 1px solid #e2e2e2;
  }
  .uploader-box {
    text-align: center;
  }
  .upload-icon {
    width: 35.58px;
    height: 30px;
    margin: 40px 0 20px;
  }
  .upload-icon-text {
    font-size: 22px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #888888;
  }
  .uploader-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
.normal-upload-box {
  margin-top: 30px;
  padding: 30px 20px;
  background: #fff;
  .upload-title {
    font-size: 28px;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #000000;
    margin-bottom: 22px;
  }
  .upload-info {
    font-size: 24px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #000000;
    margin-bottom: 8px;
  }
  .upload-img-box {
    margin: 40px 0;
  }
  .upload-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .upload-item-box {
    border: 1px solid #707070;
    width: calc(33.3% - 22px);
    height: 204px;
    margin-bottom: 22px;
    position: relative;
  }
  .text-area-box {
    margin: 20px 0;
    height: 359px;
    border: 1px solid #e2e2e2;
  }
  .uploader-box {
    text-align: center;
  }
  .upload-icon {
    width: 35.58px;
    height: 30px;
    margin: 40px 0 20px;
  }
  .upload-icon-text {
    font-size: 22px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #888888;
  }
  .uploader-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
.big-line {
  height: 0px;
  opacity: 1;
  border: 1px solid #707070;
  margin: 50px 0;
}
.Review-btn {
  margin: 24px 0;
  height: 90px;
  background: #273458;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-family: PingFang SC-Bold, PingFang SC;
  font-weight: bold;
  color: #ffffff;
  box-shadow: 0px 3px 12px 1px rgba(71, 71, 71, 0.16);
}
.goBack-box {
  display: flex;
  align-items: center;
  font-size: 24px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #000000;
  .goDown-go {
    width: 50%;
    margin-right: 12px;
    justify-content: center;
    display: flex;
    align-items: center;
    height: 80px;
    background: #ffffff;
    border: 1px solid #273458;
  }
  .goDown-back {
    width: 50%;
    display: flex;
    align-items: center;
    margin-left: 12px;
    height: 80px;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #273458;
  }
}

// 商铺详情
.shop-box {
  .upload-title {
    font-size: 28px;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #000000;
    margin-bottom: 22px;
  }
  .upload-info {
    font-size: 24px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #000000;
    margin-bottom: 8px;
  }
  .upload-img-box {
    margin: 40px 0;
  }
  .upload-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .upload-item-box {
    border: 1px solid #707070;
    width: calc(33.3% - 22px);
    height: 204px;
    margin-bottom: 22px;
    position: relative;
  }
  .text-area-box {
    margin: 20px 0;
    height: 359px;
    border: 1px solid #e2e2e2;
  }
  .uploader-box {
    text-align: center;
  }
  .upload-icon {
    width: 35.58px;
    height: 30px;
    margin: 40px 0 20px;
  }
  .upload-icon-text {
    font-size: 22px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #888888;
  }
  .uploader-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .shop-city-iptBox {
    background: #fff;
    padding: 40px;
  }
  .city-info {
    font-size: 24px;
    font-weight: 400;
    color: #000000;
    margin-bottom: 55px;
  }
  .city-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  .city-three-img {
    width: 73px;
    height: 73px;
    margin-right: 25px;
  }
  .header-rg-p1 {
    font-size: 28px;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #000000;
  }
  .header-rg-p2 {
    font-size: 20px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #989898;
    margin-left: 70px;
  }
  .city-title {
    font-size: 24px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #000000;
    margin-bottom: 20px;
  }
  .city-ipt {
    height: 80px;
    align-items: center;
    border: 1px solid #e2e2e2;
  }
  :deep(.van-field__control) {
    font-size: 28px;
  }
  .city-detail-info {
    font-size: 24px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #000000;
    margin: 30px 0 20px;
  }
  .ipt-flexBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .flexBox-lf {
    width: 50%;
    margin-right: 8px;
  }
  .flexBox-rg {
    width: 50%;
    margin-left: 8px;
  }
  .num-info {
    margin: 30px 0 20px;
    font-size: 24px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #000000;
  }
}
.shop-person-iptBox {
  background: #fff;
  margin-top: 20px;
  padding: 40px;
  .checkedOut-box {
    display: flex;
    align-items: center;
    font-size: 24px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #000000;
    margin-bottom: 30px;
  }
  .checkedOut-lf {
    width: 60%;
  }
  .checkedOut-rg {
    text-align: right;
  }
  .charging-box {
    display: flex;
    align-items: center;
    font-size: 24px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #000000;
    margin-bottom: 20px;
  }
  .charging-box-lf {
    width: 40%;
  }
  .charging-box-rg {
    border: 1px solid #e2e2e2;
  }
  .charging-ipt {
    align-items: center;
    height: 70px;
    background: #ffffff;
  }
}
.shop-adType-box {
  margin-top: 20px;
  padding: 30px 20px;
  background: #fff;
  .adType-header {
    display: flex;
  }
  .ad-header-lf {
    margin-right: 20px;
  }
  .ad-header-img {
    width: 280px;
    height: 280px;
  }
  .rg {
    flex: 1;
    position: relative;
  }
  .ad-header-rg-1 {
    font-size: 30px;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #000000;
    margin-bottom: 15px;
  }
  .ad-header-rg-2 {
    font-size: 24px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    margin-bottom: 60px;
    color: #000000;
  }
  .ad-header-rg-3 {
    font-size: 26px;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #000000;
    text-align: right;
  }
  .adType-line {
    height: 0px;
    margin: 30px 0;
    opacity: 0.23;
    border: 1px solid #707070;
  }
  .type-upgrade-box {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
  }
  .upgrade-box {
    height: 70px;
    background: #273458;
    width: 449px;
    font-size: 28px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 30px;
  }
  .price-box {
    border: 1px solid #707070;
    height: 70px;
    display: flex;
    align-items: center;
  }
  .price-box-1 {
    width: 26%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #000000;
  }
  .price-box-2 {
    width: 37%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid #707070;
    height: 70px;
    font-size: 24px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #000000;
    border-right: 1px solid #707070;
  }
  .price-box-3 {
    width: 37%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #000000;
  }
  .price-box-two {
    border-top: none;
  }
}
.shop-upload-box {
  margin-top: 30px;
  padding: 30px 20px;
  background: #fff;
  .upload-title {
    font-size: 28px;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #000000;
    margin-bottom: 22px;
  }
  .upload-info {
    font-size: 24px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #000000;
    margin-bottom: 8px;
  }
  .upload-img-box {
    margin: 40px 0;
  }
  .upload-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .upload-item-box {
    border: 1px solid #707070;
    width: calc(33.3% - 22px);
    height: 204px;
    margin-bottom: 22px;
    position: relative;
  }
  .text-area-box {
    margin: 20px 0;
    height: 359px;
    border: 1px solid #e2e2e2;
  }
  .uploader-box {
    text-align: center;
  }
  .upload-icon {
    width: 35.58px;
    height: 30px;
    margin: 40px 0 20px;
  }
  .upload-icon-text {
    font-size: 22px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #888888;
  }
  .uploader-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
// vip
.vip-box {
  .upload-item-box-vip-one {
    width: 100%;
    height: 964px;
    margin-bottom: 20px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #707070;
    display: flex;
    justify-content: center;
    align-items: center;
    .uploader-box {
      width: 250px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      .upload-icon-text {
        margin-top: 10px;
        width: 250px;
        height: 80px;
        font-size: 28px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #888888;
        text-align: center;
      }
    }
  }
  .upload-item-box-vip-one-702 {
    width: 100%;
    height: 702px;
  }
  .upload-item-box-vip-one-501 {
    width: 100%;
    height: 501px;
  }
  .upload-item-box-vip-one-702 {
    width: 100%;
    height: 702px;
  }
  .upload-item-box-vip-two {
    width: 100%;
    height: 501px;
    margin-bottom: 20px;
    overflow: hidden;
    // background: #ffffff;
    // border: 1px solid #707070;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .upload-item-box-vip-two-item {
      width: 49%;
      height: 100%;
      box-sizing: border-box;
      background: #ffffff;
      border: 1px solid #707070;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .uploader-box {
      width: 250px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      .upload-icon-text {
        margin-top: 10px;
        width: 250px;
        height: 80px;
        font-size: 28px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #888888;
        text-align: center;
      }
    }
  }
  .paragraph {
    width: 100%;
    .paragraph-title {
      width: 100%;
      height: 115px;
      line-height: 115px;
      padding-left: 63px;
      box-sizing: border-box;
      background: #ffffff;
      font-size: 28px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #989898;
    }
    .paragraph-title-text {
      .van-cell {
        font-size: 40px;
        font-family: Didot HTF-M06-Medium, Didot HTF-M06;
        font-weight: 500;
        color: #989898;
        padding-left: 65px;
        border: 0px;
        background: #f8f8f8;
      }
    }
    .paragraph-title-text-w {
      .van-cell {
        font-size: 40px;
        font-family: Didot HTF-M06-Medium, Didot HTF-M06;
        font-weight: 500;
        color: #989898;
        padding-left: 65px;
        border: 0px;
        background: #fff;
      }
    }
    .paragraph-context {
      background: #f8f8f8;
    }
  }
  .vip-input-box {
    width: 100%;
    height: 70px;
    margin: 15px 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .vip-input-box-title {
      width: 30%;
      height: 100%;
      background: #273458;
      font-size: 26px;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      line-height: 70px;
      color: #ffffff;
      text-align: center;
    }
    .vip-input-box-input {
      background: #f3f3f3;
      width: 70%;
      height: 70px;
      .van-cell {
        width: 100%;
        height: 100%;
        background: #f3f3f3;
      }
    }
    .lang-box {
      width: 100%;
      height: 100%;
      position: relative;
      .area-flex-box {
        width: 100%;
        height: 100%;
        // border: 1px solid rgba(112, 112, 112, 0.34);
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .area-box-lf {
        font-size: 28px;
        font-weight: 400;
        color: #242424;
      }
      .bottom-icon-bl-img {
        width: 48px;
        height: 48px;
      }
      .location-select-box {
        position: absolute;
        z-index: 1;
        background: #fff;
        padding: 20px;
        left: 0;
        right: 0;
      }
      .location-ipt {
        height: 81px;
        align-items: center;
      }
      :deep(.van-field__control) {
        font-size: 28px;
      }
      .location-list {
        margin-bottom: 40px;
      }
      .location-list-title {
        font-size: 30px;
        font-weight: bold;
        color: #000000;
      }
      .state-cell {
        box-sizing: border-box;
        padding: 26px 0;
        overflow: hidden;
        font-size: 28px;
        font-weight: 400;
        background: #fff;
        color: #000000;
      }
      .state-value {
        font-size: 28px;
        font-weight: 400;
        color: #000000;
        text-align: center;
      }
      .city-cell {
        box-sizing: border-box;
        padding: 26px 0;
        overflow: hidden;
        font-size: 24px;
        font-weight: 400;
        color: #989898;
      }
      .city-value {
        font-size: 24px;
        font-weight: 400;
        color: #989898;
        text-align: center;
      }
    }
  }
}
.uploader-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.van-cell_value--alone {
  font-size: 32px;
  height: 50px;
  line-height: 50px;
}
:deep(.van-uploader) {
  width: 100%;
  height: 100%;
}
:deep(.van-uploader__wrapper) {
  width: 100%;
  height: 100%;
}
:deep(.van-uploader__input-wrapper) {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.uploader-img {
  width: 100%;
  height: 100%;
}
</style>
